Introduction to Next.js & Setup

▲ Next.js Lesson 1 Beginner

Next.js is a flexible React framework built by Vercel. It extends React's capabilities by providing out-of-the-box support for Server-Side Rendering (SSR), Static Site Generation (SSG), dynamic image loading, routing, and backend API routes.

1 React vs Next.js: Why use a Framework?

Standard React apps run client-side (Single Page Applications). This means the browser receives an empty HTML shell and uses JavaScript to build the view, which presents challenges for SEO crawlers and initial load performance.

Next.js solves these issues by rendering pages on the server first, delivering fully populated HTML pages to users instantly:

Server-Side Rendering (SSR): Renders pages dynamically on each request.
Static Site Generation (SSG): Pre-renders pages at build time for fast, CDN-ready loading.
App Router: A modern file-system router with support for React Server Components.

2 Scaffolding with create-next-app

Use the official Next.js CLI to initialize projects programmatically:

Terminal — Create Next.js App

# 1. Initialize project scaffold
npx create-next-app@latest my-next-app

# 2. Select setup preferences:
#    - TypeScript: Yes
#    - ESLint: Yes
#    - Tailwind CSS: Yes/No
#    - Src Directory: Yes
#    - App Router: Yes (Recommended)
#    - Import Alias: @/*

# 3. Navigate into folder
cd my-next-app

# 4. Start local development server
npm run dev

The compiler runs the application locally on http://localhost:3000, watching files for updates.

3 Code Challenge

Challenge: Open your command prompt, initialize a new Next.js workspace, and identify the primary difference between the pages/ routing model and the modern app/ router directory layout.