---
title: "Modern Next.js Setup"
description: "Create a modern Next.js 16 application from scratch with TypeScript, Tailwind CSS, and shadcn/ui components. Set up the project structure for building a product review application."
canonical_url: "https://vercel.com/academy/ai-summary-app-with-nextjs/modern-nextjs-setup"
md_url: "https://vercel.com/academy/ai-summary-app-with-nextjs/modern-nextjs-setup.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-11T10:12:54.826Z"
content_type: "lesson"
course: "ai-summary-app-with-nextjs"
course_title: "Creating an AI Summary App with Next.js"
prerequisites: []
---
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
# Modern Next.js Setup
# 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
```bash
npx create-next-app@latest ai-review-summary
```
**Configuration prompts:**
```
✔ Would you like to use the recommended Next.js defaults? … Yes
```
```bash
cd ai-review-summary
```
## Step 2: Install shadcn/ui
shadcn/ui provides beautifully designed components built with Radix UI and Tailwind.
```bash
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:
```bash
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`:**
```tsx title="app/page.tsx"
export default function Home() {
return (
Product Reviews
A modern Next.js app for displaying customer reviews
);
}
```
**Update `app/layout.tsx`:**
```tsx title="app/layout.tsx" {2-3}
export const metadata: Metadata = {
title: "AI Review Summary",
description: "Customer reviews powered by AI",
};
```
## Step 5: Run the Dev Server
```bash
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**
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:
```tsx title="app/page.tsx"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
export default function Home() {
return (
Product Reviews
A modern Next.js app for displaying customer reviews
);
}
```
5. **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):
```bash
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:**
- [Next.js 16 Documentation](https://nextjs.org/docs)
- [shadcn/ui Documentation](https://ui.shadcn.com)
- [Tailwind CSS](https://tailwindcss.com)
---
[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)