Nextjs 13 ~ 14 takeaways

[reboottime]

Overview

this article extract next.js 13 takeaways, for someone who has been aways from next.js 1+ years.

Catch up with Nextjs 13~14 new concepts in a hour

Key takeaways

• RSC by default
• nesting pattern in page organization
• more opinionated on file organization, naming
  • (groupName): group similar page into the same folder without showing [group name] in URL
  • [slug]: dynamic route
  • _name: private file or folder
  • loading.tsx used for page transition
  • not-found.tsx for 404
  • error.tsx: must be client component

[reboottime]

app directory and rsc

1 minutes

• app directory : new way of organizing code
  • layout.tsx: layout follows nesting feature
  • page.tsx
  • metadata: metadata is page related, you can't rely on the page layout to define a global metadata.
• RSC: react server component, by default all components within app directory are RSCs.
  • pros:
    • Load faster - Don't have to wait for the JavaScript to load
    • Smaller client bundle size
    • SEO friendly
    • Access to resources the client can't access
    • Hide sensitive data from the client
    • More secure against XSS attacks
    • improved developer experience
  • cons: you may get uncomfortable not being able to add interactive, useState as such

Reference:

Next.js 13 Crash Course, the first 20 minutes | App Directory, React Server Components & More

[reboottime]

Static vs Dynamic Rendering in 13 ~ 14

Rendering ( converting your code into UI)

• when ( the strategy)
  • static (at build time) ( by default option)
  • dynamic( at request time)
• where ( the environment)
  • server (backend)
  • client ( browser)

References

• https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
• [static vs dynamic rendering in nextjs 13]()