Back to all posts

Getting Started with Next.js 13 and App Router

2023-06-25

Next.js
Next.js 13 introduces a new App Router built on React Server Components. This new routing paradigm offers improved performance and developer experience.
To get started, create a new Next.js project:
npx create-next-app@latest my-app --typescript
The new App Router uses a file-system based router similar to the pages directory, but with new file conventions:
  • layout.tsx: Shared UI for a segment and its children
  • page.tsx: UI unique to a route
  • loading.tsx: Loading UI
  • error.tsx: Error UI
  • not-found.tsx: Not found UI
Here's a simple example of a page component:
export default function Page() { return <h1>Hello, Next.js 13!</h1> }
The App Router also introduces new data fetching methods. For example, you can now use async/await in Server Components:
async function getData() { const res = await fetch('https://api.example.com/data') return res.json() } export default async function Page() { const data = await getData() return <main>{/* Use data */}</main> }
By leveraging these new features, you can build more performant and maintainable Next.js applications.