Next.js App Router Playground

Explore the new app directory (App Router) in Next.js 13.

Deploy

View Demo

Framework

Next.js

Use Case

Starter

CSS

Tailwind

Next.js App Router Playground

Next.js recently introduced the App Router with support for:

Layouts: Easily share UI while preserving state and avoiding re-renders.
Server Components: Making server-first the default for the most dynamic applications.
Streaming: Display instant loading states and stream in updates.
Suspense for Data Fetching: async/await support and the use hook for component-level fetching.

The App Router can coexist with the existing pages directory for incremental adoption. While you don't need to use the App Router when upgrading to Next.js 13, we're laying the foundations to build complex interfaces while shipping less JavaScript.

Running Locally

Install dependencies:

pnpm install

Start the dev server:

pnpm dev

Documentation

https://nextjs.org/docs

← Back to Templates

vercel/app-playground

Next.js App Router Playground

Explore the new app directory (App Router) in Next.js 13.

Framework

Use Case

CSS

Next.js App Router Playground

Next.js recently introduced the App Router with support for:

Layouts: Easily share UI while preserving state and avoiding re-renders.
Server Components: Making server-first the default for the most dynamic applications.
Streaming: Display instant loading states and stream in updates.
Suspense for Data Fetching: async/await support and the use hook for component-level fetching.