Skip to content
Back to Templates

Next.js App Router Playground

Examples of many Next.js App Router features.

DeployView Demo
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

GitHub Repovercel/app-playground
Use Cases
Starter
Stack
Next.jsTailwind

Related Templates

Next.js Commerce

Starter kit for high-performance commerce with Shopify.
Next.js Commerce

Nextra: Docs Starter Kit

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.
Nextra: Docs Starter Kit

Blog Starter Kit

A statically generated blog example using Next.js and Markdown.
Blog Starter Kit
Next.js App Router Playground – Vercel