Using Route Handlers with Server Components
export default async function Page() { let res = await fetch('http://localhost:3000/api/data'); let data = await res.json(); return <h1>{JSON.stringify(data)}</h1>; }
Fetching JSON data from a Route Handler in a Server Component.
async
component makes a request to a Route Handler to retrieve some JSON data:export async function GET(request: Request) { return Response.json({ data: 'Next.js' }); }
A Route Handler that returns static JSON data.
- Both Route Handlers and Server Components run securely on the server. You don't need the additional network hop. Instead, you can call whatever logic you intended to place inside the Route Handler directly in the Server Component. This might be an external API or any
Promise
. - Since this code is running on the server with Node.js, we need to provide the absolute URL for the
fetch
versus a relative URL. In reality, we wouldn't hardcodelocalhost
here, but instead need to have some conditional check based on the environment we're in. This is unnecessary since you can call the logic directly.
export default async function Page() { // call your async function directly let data = await getData(); // { data: 'Next.js' } // or call an external API directly let data = await fetch('https://api.vercel.app/blog') // ... }
Server Components are able to fetch data directly.
Static or dynamic Route Handlers
GET
method. This can often be confusing for existing Next.js developers moving from the Pages Router and API Routes.next build
:export async function GET(request: Request) { return Response.json({ data: 'Next.js' }); }
A Route Handler that returns static JSON data.
txt
files, or really any file, which can be computed and prerendered during the build. The statically generated file is then automatically cached, and even periodically updated if desired.export async function GET(request: Request) { let res = await fetch('https://api.vercel.app/blog'); let data = await res.json(); return Response.json(data); }
Return a list of blog posts as JSON data.
Route Handlers and Client Components
async
and fetch or mutate data. Rather than needing to write a fetch
and create a Route Handler, you can instead call Server Actions directly from Client Components.'use client'; import { save } from './actions'; export function UserForm() { return ( <form action={save}> <input type="text" name="username" /> <button>Save</button> </form> ); }
A form and input to save a name.
'use client'; import { save } from './actions'; export function UserForm({ username }) { async function onSave(event) { event.preventDefault(); await save(username); } return <button onClick={onSave}>Save</button>; }
Server Actions can be called from event handlers.
Using Suspense with Server Components
async function BlogPosts() { let data = await fetch('https://api.vercel.app/blog'); let posts = await data.json(); return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); } export default function Page() { return ( <section> <h1>Blog Posts</h1> <BlogPosts /> </section> ); }
A page which contains an async component with data fetching.
Page
component, you were correct. The Suspense
boundary needs to be placed higher than the async
component doing the data fetching. It will not work if the boundary is inside of the async
component.import { Suspense } from 'react'; async function BlogPosts() { let data = await fetch('https://api.vercel.app/blog'); let posts = await data.json(); return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); } export default function Page() { return ( <section> <h1>Blog Posts</h1> <Suspense fallback={<p>Loading...</p>}> <BlogPosts /> </Suspense> </section> ); }
Using Suspense with React Server Components.
import { unstable_noStore as noStore } from 'next/cache'; async function BlogPosts() { noStore(); // This component should run dynamically let data = await fetch('https://api.vercel.app/blog'); let posts = await data.json(); return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }
Opt-into dynamic rendering inside async components.
Using the incoming request
useSearchParams
unnecessarily.export default function Page({ params, searchParams, }: { params: { slug: string } searchParams: { [key: string]: string | string[] | undefined } }) { return <h1>My Page</h1> }
Reading parts of the URL and the search parameters.
Using Context providers with App Router
children
as a prop and renders them. For example:'use client'; import { createContext } from 'react'; export const ThemeContext = createContext({}); export default function ThemeProvider({ children, }: { children: React.ReactNode; }) { return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>; }
A Client Component that uses React Context.
import ThemeProvider from './theme-provider'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html> <body> <ThemeProvider>{children}</ThemeProvider> </body> </html> ); }
A root layout that weaves a client context provider and Server Component children.
page
) lower in the tree.Using Server and Client Components together
export default function Page() { return ( <section> <h1>My Page</h1> </section> ); }
A Server Component page.
"use client"
directive at the top:'use client'; import { useState } from 'react'; export function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
A Client Component button that increments a count.
import { Counter } from './counter'; export default function Page() { return ( <section> <h1>My Page</h1> <Counter /> </section> ); }
Using a Client Component from a Server Component.
<Counter>
is a Client Component. Great! What about components lower in the tree than the counter? Can those be Server Components? Yes, through composition:import { Counter } from './counter'; function Message() { return <p>This is a Server Component</p>; } export default function Page() { return ( <section> <h1>My Page</h1> <Counter> <Message /> </Counter> </section> ); }
Children of a Client Component can be Server Components.
'use client'; import { useState } from 'react'; export function Counter({ children }: { children: React.ReactNode }) { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> {children} </div> ); }
The counter now accepts children and displays them.
Adding “use client”
unnecessarily
"use client"
directive everywhere?"use client"
directive is added, you pass into the "client boundary" giving you the ability to run client-side JavaScript (i.e. using React hooks or state). Client Components are still prerendered on the server, similar to components in the Next.js Pages Router.<Counter>
would become Client Components. You don't need to add "use client"
to every file. This might be an approach taken for incremental adoption of the App Router, where a component high up the tree becomes a Client Component and it becomes weave child Server Components further down.Not revalidating data after mutations
export default function Page() { async function create(formData: FormData) { 'use server'; let name = formData.get('name'); await sql`INSERT INTO users (name) VALUES (${name})`; } return ( <form action={create}> <input name="name" type="text" /> <button type="submit">Create</button> </form> ); }
A Server Action that inserts the name into a Postgres database.
import { revalidatePath } from 'next/cache'; export default async function Page() { let names = await sql`SELECT * FROM users`; async function create(formData: FormData) { 'use server'; let name = formData.get('name'); await sql`INSERT INTO users (name) VALUES (${name})`; revalidatePath('/'); } return ( <section> <form action={create}> <input name="name" type="text" /> <button type="submit">Create</button> </form> <ul> {names.map((name) => ( <li>{name}</li> ))} </ul> </section> ); }
Revalidating data inside of a Server Action.
Redirects inside of try/catch blocks
redirect()
function does not require you to use return redirect()
as it uses the TypeScript never
type. Further, internally this function throws a Next.js specific error. This means you should handle redirecting outside of try/catch blocks.import { redirect } from 'next/navigation'; async function fetchTeam(id) { const res = await fetch('https://...'); if (!res.ok) return undefined; return res.json(); } export default async function Profile({ params }) { const team = await fetchTeam(params.id); if (!team) { redirect('/login'); } // ... }
Redirecting from a Server Component.
'use client'; import { navigate } from './actions'; export function ClientRedirect() { return ( <form action={navigate}> <input type="text" name="id" /> <button>Submit</button> </form> ); }
Redirecting in a Client Component through a Server Action.
'use server'; import { redirect } from 'next/navigation'; export async function navigate(data: FormData) { redirect('/posts'); }
A Server Action that redirects to a new route.