NextJS

• 1
  • what
    • Uses SSR by default throug app folder for Pre-rendering (server gives html & css loaded from JSX and client will only need to hydrate)
    • API folder
  • Setup
    • pnpx create-next-app@latest --typescript --eslint . or yarn create next-app .
    • you may disable telemetry if you want
  • What it does by default?
    • next.js compiler
    • js and CSS files are automatically minified
    • compiles CSS using PostCSS.
• Features
  • Using it as Backend w API folder
  • Rendering types in app folder
  • Routing
    • generateStaticParams
      • used in PW under [slug] for generating blog articles at build time
    • Maybe only for pages dirs
      • If index.js file is into: MyFolderName, then the route would be
        • localhost:3000\MyFolderName - and it would load index.js
      • Nested dynamic routes
      • More nesting and catch all route
      • Advanced
  • Metadata
    • You can also create it based on the output of a js file
    • Social based
      • discord (scroll until bottom)
    • Pages folder
      • component - \_document.js and \_app.js are used to override the default HTML document that Next.js uses. The `` component can be used in these files to add global meta tags. The first would load them by server-side while the other will do it both by client and render side.
      • You should not use <title> tag in the _document.js
  • Fetching - (v14 app folder)
    • getStaticProps (SSG) swapped to default behaviour
      • just add async to a function that fetches stuff and now is the same as using getStaticProps
    • getServerSideProps (SSR) swapped to {cache: “no-store”}
      • 
    • (ISR) to next:{revalidate: 3}
      • 
  • You need to add sharp package when not deploying on vercel
    • To get this error, just build and start the project
  • .env
    • .env
      • if you use .env on client-side
        • you need to replace the .env with a version prefixed by NEXT_PUBLIC_
        • even if a version of an environment variable without the NEXT_PUBLIC_ prefix doesn’t exist, Next.js will still understand that it’s what you’re referring to when you use it in server-side code.
  • Archived (still useful)
    • Rendering types in pages folder
    • Data fetching
      • getServerSideProps works in request time
      • Sintassi

        export const getServerSideProps = async() => {
        	fetch()
        	return {
        		props : {
        			qualsiasiCosa : ""
        		}
        	}
        }
        				```

      • getStaticProps
      • works on build time