🚀 The Full Stack Framework
Next.js is a framework built on top of React that adds server-side rendering, routing, and API handling. It is the default choice for modern React applications.
1. System Requirements
- Node.js: 18.17 or later.
- OS: macOS, Windows (WSL2 recommended), or Linux.
2. Create Next.js App
We will use the App Router, TypeScript, and Tailwind CSS.
npx create-next-app@latest my-next-appRecommended Selections:
- 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 to use `src/` directory? Yes (Cleaner structure)
- Would you like to use App Router? Yes (The modern standard)
- Would you like to customize the default import alias (@/*)? No
3. Project Structure
Understanding the src/app directory is crucial.
page.tsx: The UI for a route.layout.tsx: Shared UI (headers, footers) for a segment and its children.loading.tsx: Loading UI for a segment.error.tsx: Error UI for a segment.
4. VS Code Setup
In addition to standard React extensions, install:
- Next.js Snippets
- Tailwind CSS IntelliSense (Critical for class autocompletion)
5. Run Development Server
cd my-next-app
npm run devVisit http://localhost:3000.