Vercel Logo

Modern Next.js setup

Next.js 16 brings major improvements: async request APIs, better caching primitives, and Turbopack for faster dev builds. Starting with the latest version and modern tooling sets you up for success.

Outcome

Create a fresh Next.js 16 app with TypeScript, Tailwind CSS, and shadcn/ui components installed and configured.

Fast Track

  1. Run npx create-next-app@latest ai-review-summary (Yes to TypeScript, Tailwind, App Router; No to src/ directory)
  2. Run npx shadcn@latest init then npx shadcn@latest add card avatar separator
  3. Replace app/page.tsx with a simple "Product Reviews" heading and run pnpm dev

Hands-on Exercise 1.1

Set up a modern Next.js development environment:

Requirements:

  1. Create a new Next.js 16 app with TypeScript and Tailwind CSS
  2. Configure the App Router
  3. Install shadcn/ui and add basic components (card, avatar, separator)
  4. Create folder structure: lib/, components/, app/
  5. Run the dev server and verify it works

Implementation hints:

  • Use pnpm for faster installs
  • Choose App Router when prompted
  • Enable Turbopack for dev mode
  • shadcn/ui requires a few config steps (see solution)

Step 1: Create Next.js App

npx create-next-app@latest ai-review-summary

Configuration prompts:

  ✔ Would you like to use the recommended Next.js defaults? … Yes

cd ai-review-summary

Step 2: Install shadcn/ui

shadcn/ui provides beautifully designed components built with Radix UI and Tailwind.

npx shadcn@latest init

Configuration prompts:

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which color would you like to use as the base color? › Neutral

This creates:

  • lib/utils.ts with cn() helper
  • Updates to tailwind.config.ts

Step 3: Add Base Components

Install the components we'll need for the review app:

npx shadcn@latest add card avatar separator

This adds:

  • components/ui/card.tsx - Card container
  • components/ui/avatar.tsx - User avatars
  • components/ui/separator.tsx - Dividers

Step 4: Clean Up Default Files

Remove the default Next.js boilerplate by replacing the content of the files with the following:

Update app/page.tsx:

app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold mb-4">Product Reviews</h1>
        <p className="text-muted-foreground">
          A modern Next.js app for displaying customer reviews
        </p>
      </div>
    </main>
  );
}

Update app/layout.tsx:

app/layout.tsx
export const metadata: Metadata = {
  title: "AI Review Summary",
  description: "Customer reviews powered by AI",
};

Step 5: Run the Dev Server

pnpm dev

Expected output:

▲ Next.js 16.0.8 (Turbopack)
- Local:        http://localhost:3000
- Network:      http://192.168.1.5:3000

✓ Starting...
✓ Ready in 1.2s

Try It

  1. Visit http://localhost:3000

  2. You should see:

    • "Product Reviews" heading
    • Clean Tailwind styling
    • No console errors

  3. Test hot reload:

    • Change the heading text in app/page.tsx
    • Save the file
    • Page updates instantly (Turbopack)

  4. Verify shadcn/ui works:

    • Add a Card component to the page:
app/page.tsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 
export default function Home() {
  return (
    <main className="min-h-screen p-8">
      <div className="max-w-4xl mx-auto space-y-8">
        <Card>
          <CardHeader>
            <CardTitle>Product Reviews</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-muted-foreground">
              A modern Next.js app for displaying customer reviews
            </p>
          </CardContent>
        </Card>
      </div>
    </main>
  );
}
  1. Verify the card displays with proper styling

Project Structure

Your app should now look like this:

ai-review-summary/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Homepage
│   └── globals.css         # Global styles (Tailwind)
├── components/
│   └── ui/                 # shadcn/ui components
│       ├── card.tsx
│       ├── avatar.tsx
│       └── separator.tsx
├── lib/
│   └── utils.ts            # Helper functions
├── next.config.ts          # Next.js configuration
├── tailwind.config.ts      # Tailwind configuration
├── tsconfig.json           # TypeScript configuration
└── package.json            # Dependencies

Understanding the Stack

Next.js 16:

  • App Router for file-based routing
  • Server Components by default (better performance)
  • Turbopack for 10x faster dev builds
  • React 19 with new async capabilities

TypeScript:

  • Type safety across the entire app
  • Better IDE autocomplete
  • Catch errors before runtime

Tailwind CSS:

  • Utility-first CSS framework
  • No separate CSS files needed
  • Responsive design out of the box

shadcn/ui:

  • Copy/paste components (not a package dependency)
  • Built on Radix UI primitives
  • Fully customizable with Tailwind

Troubleshooting

npx shadcn@latest init fails with "Could not find a configuration file"

You're running the command from the wrong directory. Make sure you're in your project root (where package.json lives):

cd ai-review-summary
npx shadcn@latest init

Done-When

  • Next.js 16 app created with TypeScript and Tailwind
  • App Router configured (not Pages Router)
  • shadcn/ui installed with card, avatar, separator components
  • Dev server runs without errors
  • Basic folder structure in place

What's Next

Your development environment is ready. In the next lesson, you'll build a type-safe data layer with Zod schemas for products and reviews. This foundation will make the app reliable and easy to extend.

Sources: