Create a Next.js App Router Project from Scratch

Beginner10 minTrending

Scaffold a new Next.js project with App Router, TypeScript, Tailwind CSS, and ESLint fully configured and ready for development.

Prerequisites

-Node.js 18+ installed
-npm, pnpm, or yarn

Steps

Create the Next.js project

Run create-next-app with App Router, TypeScript, Tailwind, and ESLint enabled.

$ npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --use-pnpm

Replace --use-pnpm with --use-npm or --use-yarn based on your package manager preference.

Navigate into the project and start the dev server

Move into the project directory and verify everything works.

$ cd my-app && pnpm dev

Review the project structure

Inspect the App Router file structure with the src/app directory layout.

$ ls -la src/app/

layout.tsx is the root layout, page.tsx is the home page, and globals.css contains Tailwind directives.

Add a new route

Create a new page by adding a directory and page.tsx inside the app folder.

$ mkdir -p src/app/about && echo 'export default function AboutPage() { return <h1>About</h1>; }' > src/app/about/page.tsx

Build for production

Run a production build to verify there are no TypeScript or build errors.

$ pnpm build

Next.js will report any type errors, missing metadata, or page generation issues during build.

Full Script

full-script.sh

#!/bin/bash
# Next.js App Router Project Scaffold
set -euo pipefail

PROJECT_NAME=${1:-my-app}

echo "=== Creating Next.js App Router project: $PROJECT_NAME ==="
npx create-next-app@latest "$PROJECT_NAME" \
  --typescript --tailwind --eslint --app --src-dir --use-pnpm

cd "$PROJECT_NAME"

echo ""
echo "=== Installing additional dev dependencies ==="
pnpm add -D prettier prettier-plugin-tailwindcss

echo ""
echo "=== Creating Prettier config ==="
cat > .prettierrc.json << 'PRETTIEREOF'
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-tailwindcss"]
}
PRETTIEREOF

echo ""
echo "=== Project created successfully ==="
echo "cd $PROJECT_NAME && pnpm dev"

FAQ

Discussion

Loading comments...

#!/bin/bash # Next.js App Router Project Scaffold set -euo pipefail PROJECT_NAME=${1:-my-app} echo "=== Creating Next.js App Router project: $PROJECT_NAME ===" npx create-next-app@latest "$PROJECT_NAME" \ --typescript --tailwind --eslint --app --src-dir --use-pnpm cd "$PROJECT_NAME" echo "" echo "=== Installing additional dev dependencies ===" pnpm add -D prettier prettier-plugin-tailwindcss echo "" echo "=== Creating Prettier config ===" cat > .prettierrc.json << 'PRETTIEREOF' { "semi": true, "singleQuote": false, "tabWidth": 2, "trailingComma": "es5", "plugins": ["prettier-plugin-tailwindcss"] } PRETTIEREOF echo "" echo "=== Project created successfully ===" echo "cd $PROJECT_NAME && pnpm dev"