Skip to main content

Next 13 ↔ version 13 of Next.js, beta, latest as of October 25th, 2022

aka Next-13

Incremental Adoption​

(feat) Next 12 compat with Next 13, can migrate individual Page from /pages to /app

Move Data Fetch to Server-Side​

( Next 13 ) to Collocate Data Fetch ops in Server Component for Sync perf

Colocation​

Next 13 /app can colocate all files

Next 12 Migration

page.tsx​

Page export default UI for Next Route vs dirpath, default Server Component - else "use client" opt-in

template.tsx

layout.tsx​

( Next 13 ) Page to export default layout UI to share with children

loading.tsx​

( Next 13 ) Page to export default loading UI on Trigger Suspense Boundary

error.tsx​

( Next 13 ) Page to export default UI on Trigger Error Boundary

not-found.tsx​

( Next 13 ) Page to export default UI for Catch All Route

head.tsx​

( Next 13 ) Page to export default <head\> for each Page Route

/app​

( Next 13 ) dir to export Page, allows Colocation

useRouter()​

Next Library Hook to return router function to Imperatively navigate within Page

References​

  1. "use client" ↔ (Next 13) Directive to opt-in to Client Component

  2. Incremental Adoption ↔ (feat) Next 12 compat with Next 13, can migrate individual Page from /pages to /app

  3. Colocation ↔ Next 13 /app can colocate all files

  4. to use [Error Boundary](error-boundary), only avail in [CC](cc) ↔ Error Boundary now available in FC via Next 13!