Skip to main content

Next.js App Router Basics: Get Started

The Next.js App Router is a modern, file-system-based routing system that automatically generates your application's routes from the folder structure inside the app directory. When you create a file like app/page.tsx, it becomes your home page at /; a file at app/dashboard/page.tsx becomes a /dashboard route. Unlike manual routing configurations, the App Router lets your file tree define your site's shape, making large projects intuitive and discoverable.

What is the App Router and Why Use It?​

The App Router (released as stable in Next.js 13.4, 2023) represents Next.js's vision for modern React-based web frameworks. It enables Server Components by default—React components that run only on the server, reducing JavaScript sent to clients and improving performance. It provides built-in layouts that wrap pages without re-mounting, a Suspense-first loading model, and native error boundaries via error.tsx files. The old Pages Router is still supported but deprecated; all new projects use the App Router.

Real-world teams using Next.js (Vercel, Stripe, Notion) adopted the App Router because it reduces boilerplate, encourages safer defaults, and makes scaling easier. You get type-safe routing for free with TypeScript, automatic code splitting per route, and streaming-capable components—all without configuration.

Setting Up Your First App Router Project​

To create a new Next.js project with the App Router, use the official create-next-app command. This CLI scaffolds a ready-to-run project with sensible defaults and a modern development environment.

Step 1: Install Node.js and npm​

Ensure you have Node.js 18.17 or later installed (check with node --version). This is a hard requirement for Next.js 13+. npm 9+ is recommended for speed.

Step 2: Run create-next-app​

Open your terminal and run:

npx create-next-app@latest my-nextjs-app

The CLI prompts you with interactive questions. For a beginner, accept the defaults or choose these settings:

  • TypeScript: Yes (enables type safety and better IDE support)
  • ESLint: Yes (catches code errors)
  • Tailwind CSS: Yes (modern utility-first styling)
  • src/ directory: No (keep the simpler root-level structure)
  • App Router: Yes (the modern choice—the CLI defaults to this in 2026)
  • Turbopack: Yes (faster build bundler than Webpack)

Here's what the CLI output looks like:

✔ Would you like to use TypeScript? ... Yes
✔ Would you like to use ESLint? ... Yes
✔ Would you like to use Tailwind CSS? ... Yes
✔ Would you like your code inside a `src/` directory? ... No
✔ Would you like to use App Router? ... Yes
✔ Would you like to use Turbopack for next dev? ... Yes

Step 3: Navigate and Start the Dev Server​

After installation completes, enter the project directory and start the development server:

cd my-nextjs-app
npm run dev

This launches the Next.js development server (usually on http://localhost:3000). Open that URL in your browser. You'll see the default Next.js welcome page—a sign that your App Router project is running.

The App Router Folder Structure​

When you run create-next-app, it creates an app directory. This is the heart of the App Router; every file you add here becomes part of your application. Here's the typical structure:

my-nextjs-app/
├── app/
│   ├── layout.tsx           # Root layout (wraps all pages)
│   ├── page.tsx             # Home page at /
│   ├── globals.css          # Global styles
│   └── favicon.ico          # Browser tab icon
├── public/                  # Static assets (images, fonts, etc.)
├── package.json             # Project dependencies
├── tsconfig.json            # TypeScript configuration
├── tailwind.config.ts       # Tailwind CSS config
├── next.config.ts           # Next.js configuration
└── .gitignore              # Files to exclude from git

The app directory is where routes live. The special filenames (like layout.tsx and page.tsx) have meaning in the App Router—they control routing, rendering, and metadata.

Understanding Key Files​

app/layout.tsx is the root layout. It wraps every page in your application. You define the HTML structure here: the <html>, <head>, and <body> tags. This file runs on the server and is never replaced; child pages are inserted into its children prop.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>My Next.js App</title>
      </head>
      <body>
        <nav>Home | About | Contact</nav>
        {children}
      </body>
    </html>
  );
}

app/page.tsx is your home page, served at the / route. It's a React component that renders the content users see when they visit your site's root URL.

export default function Home() {
  return (
    <div>
      <h1>Welcome to my Next.js app</h1>
      <p>Built with the App Router and React 19.</p>
    </div>
  );
}

When you visit http://localhost:3000, the App Router combines the Root Layout and the Home Page and returns the rendered HTML.

How File Conventions Map to Routes​

The App Router uses a simple rule: folders become URL segments, and special filenames (like page.tsx) define what renders.

FileRouteDescription
app/page.tsx/Home page
app/about/page.tsx/aboutAbout page
app/blog/post/page.tsx/blog/postNested route
app/api/users/route.tsPOST /api/usersAPI endpoint

Each folder can contain a layout.tsx file, which creates a layout that wraps all child routes in that folder and subfolders—enabling nested layouts, a powerful pattern we'll explore in later articles.

Key Takeaways​

  • The App Router is the modern, file-system-based routing system for Next.js 13+, where folder and file names automatically define routes.
  • Create-next-app scaffolds a ready-to-run project in seconds; the CLI asks a few questions to tailor it to your needs.
  • The app directory is where all routes, layouts, and API handlers live; special filenames like page.tsx and layout.tsx have specific meanings.
  • File conventions are intuitive: a folder is a URL segment, and page.tsx defines what users see; layout.tsx wraps child routes.
  • Server Components by default (a key App Router feature) run only on the server, reducing client-side JavaScript and improving security and performance.

Frequently Asked Questions​

What's the difference between the App Router and the Pages Router?​

The Pages Router (Next.js <13) uses a folder structure under pages/ where files map to routes, but it relies on client-side routing and manual API setup. The App Router (Next.js 13+) is more modern: Server Components by default, built-in layouts that don't unmount, Suspense-based loading, and integrated error boundaries. In 2026, the App Router is the standard; the Pages Router is deprecated.

Do I need to use TypeScript with the App Router?​

No, but it's strongly recommended. TypeScript catches routing errors (like broken links) at build time and improves IDE autocompletion. The App Router is designed with TypeScript in mind; migration is painless if you start without it.

Can I keep my API routes in the app directory?​

Yes. In the App Router, API routes live in app/api/, using route.ts files instead of page.tsx. For example, app/api/posts/route.ts becomes a POST /api/posts endpoint. This unifies your frontend and backend code in one folder tree.

How do I customize the Next.js setup after create-next-app?​

Edit next.config.ts for Next.js options, tailwind.config.ts for Tailwind, and tsconfig.json for TypeScript. Most projects don't need to touch these initially; sensible defaults work for 80% of use cases.

Is the development server hot-reload-enabled?​

Yes. npm run dev starts the Next.js dev server with Fast Refresh, which updates your browser instantly when you save files. No manual refresh needed.

Further Reading​