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.