---
title: "Next.js App Router Playground"
description: "Examples of many Next.js App Router features."
url: "https://vercel.com/templates/next.js/app-directory"
links:
  repository: "https://github.com/vercel/app-playground"
  demo: "https://app-dir.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Next.js+App+Router+Playground&demo-description=Examples+of+many+Next.js+App+Router+features.&demo-url=https%3A%2F%2Fapp-dir.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2Fk9BYNIi5HwkHop568SjEI%2Fcfb7e8215a11667d32265b34c43b4b5b%2FCleanShot_2022-10-25_at_14.38.59_2x.png&project-name=Next.js+App+Router+Playground&repository-name=app-directory&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fapp-playground&from=templates&skippable-integrations=1"
---

# Next.js App Router Playground

Examples of many Next.js App Router features.

# Next.js App Directory Playground

Next.js introduced the `app/` directory (beta). This is the result of the [Layouts RFC](https://nextjs.org/blog/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`
1. Start the dev server: `yarn dev`

## Documentation

https://beta.nextjs.org/docs

## Related Templates

### [Nextra: Docs Starter Kit](https://vercel.com/templates/next.js/documentation-starter-kit)

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

### [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)

Starter kit for high-performance commerce with Shopify.

### [Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit)

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

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.