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
    • API folder
    • use server & server actions
      • what?
        • execute code from client to server -
        • kind of like functions that act like exposed endpoints that you can call from the client but execute on the server
        • it’s a POST request under the hood
        • great for form submissions & data mutations
      • DANGER
        • especially if you use it top-level
          • anything under the file will be visible/accessible to the client but executed server side, we’re exposing endpoints: kinda like creati API stuff ANYONE can call
          • can get an eslint rule for that
          • make a rule that whenever changes occur in X file/dir, a mantainer/owner needs to review it - & when you importa any of the functions there
        • also if you export and don’t even use the function!! - 2
          • also if user can’t get to the route where the action is called, it doesn’t matter, they can still access it -
          • they get exposed as endpoints and you can hit them like you’d do w an API
          • make sure that every action you make verify if user can/should do that
        • anyone can give any aurgument to an action -
          • sanitize the hell out of it
      • no need for useEffect & putting them on forms? -
  • 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

• v15

  • ez transition to upgrade
    • npx @next/codemod@canary upgrade latest
    • npx @next/codemod@canary next-async-request-api .
      • params prop properties needs to be awaited now
  • from cached by default to uncached
    • more here -
    • fetch, Client router cache, GET route handler
    • can opt-into auto caching again
    • Fetch
      • 
      • no-store = default
  • Form component -
  • unstableAfter & waitUntil -
    • only for vercel?
  • easier self-hosting -
  • more security for server actions -
  • Instrumentation & error tracking enhanced for library devs -

• outisde of vercel

  • needs X that understands server components
    • bundler
    • server
    • router

• Server vs client components also client comps are rendered on server first? -

  • The only way to render server comps inside client comps normallly is w prop drilling -
  • img
    •