Getting Started with Next.js

# Getting Started with Next.js Next.js is a React framework, not a replacement for React. It adds routing, server-side rendering, and build tooling on top of React so you don't have to configure all of it yourself. ## Why Use Next.js Over Plain React Plain React (via Vite or Create React App) only handles the UI layer. Next.js adds file-based routing, image optimization, API routes, and built-in SEO support like metadata handling — features almost every production app needs eventually. ## Creating Your First Project ```bash npx create-next-app@latest my-app cd my-app npm run dev ``` This scaffolds a project with the App Router by default, TypeScript support, and Tailwind CSS as options during setup. ## Understanding the File Structure Routes are created by folders inside the `app` directory. A file at `app/about/page.tsx` automatically becomes the `/about` route — no router configuration needed. ## Data Fetching Next.js lets you fetch data directly inside Server Components without a separate client-side request, which simplifies loading states and reduces the JavaScript sent to the browser. ## Common Beginner Mistakes New developers often mix client and server logic in the same component, or forget the `"use client"` directive when using hooks like `useState`. Understanding this boundary early avoids a lot of confusion later. ## Conclusion Next.js has a learning curve beyond React basics, but it pays off quickly once you're building anything beyond a toy project. It's the framework taught throughout MasterPath's Full Stack Development course.