Skip to content
← Back to Templates
Avatar of vercelvercel/app-playground

Next.js App Router Playground

Examples of many Next.js App Router features.

Deploy
View Demo
Framework
Next.js
Use Case
Starter
CSS
Tailwind
Next.js 13 App Playground

Next.js App Directory Playground

Next.js introduced the app/ directory (beta). This is the result of the Layouts RFC previously published for community feedback. This includes 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/ directory can coexist with the existing pages directory for incremental adoption. While you don't need to use the app/ directory when upgrading to Next.js 13, we're laying the foundations to build complex interfaces while shipping less JavaScript.

Running Locally

  1. Install dependencies: yarn
  2. Start the dev server: yarn dev

Documentation

https://beta.nextjs.org/docs

← Back to Templates
Next.js 13 App Playground
Avatar of vercelvercel/app-playground

Next.js App Router Playground

Examples of many Next.js App Router features.

Deploy
View Demo
Framework
Next.js
Use Case
Starter
CSS
Tailwind

Next.js App Directory Playground

Next.js introduced the app/ directory (beta). This is the result of the Layouts RFC previously published for community feedback. This includes 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/ directory can coexist with the existing pages directory for incremental adoption. While you don't need to use the app/ directory when upgrading to Next.js 13, we're laying the foundations to build complex interfaces while shipping less JavaScript.

Running Locally

  1. Install dependencies: yarn
  2. Start the dev server: yarn dev

Documentation

https://beta.nextjs.org/docs

Related Templates

Next.js Commerce

Next.js Commerce

Starter kit for high-performance commerce with Shopify.

by ▲ Vercel

Nextra: Docs Starter Kit

Nextra: Docs Starter Kit

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.

by ▲ Vercel

Blog Starter Kit

Blog Starter Kit

A statically generated blog example using Next.js and Markdown.

by ▲ Vercel

Platforms Starter Kit

Platforms Starter Kit

Next.js template for building multi-tenant applications with custom domains using App Router, Vercel Postgres, and the Vercel Domains API.

by ▲ Vercel

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential