NextJS Next.js Basics Syllabus

Name three popular package managers you can use with a Next.js project besides npm.

Yarn, pnpm, and Bun are common alternatives to npm for managing Next.js dependencies.

What is the recommended command to create a new Next.js project?

npx create-next-app@latest — this scaffolds a new Next.js application with an interactive setup for TypeScript, ESLint, Tailwind, the App Router, and more.

What does the '@latest' mean in the command 'npx create-next-app@latest'?

It tells npx to fetch and use the latest published version of the create-next-app package, ensuring the newest scaffolding template is used.

What does 'npx' do that 'npm install' does not?

npx executes a package's binary directly (downloading it temporarily if needed) without permanently installing it as a project dependency, which is ideal for one-off scaffolding tools like create-next-app.

After creating a Next.js project, which command starts the development server?

npm run dev — it starts the local development server, typically at http://localhost:3000.

On which port does the Next.js development server run by default?

Port 3000 (accessible at http://localhost:3000).

What are the standard npm scripts in a Next.js project for development, building, and production start?

npm run dev (start dev server), npm run build (create optimized production build), and npm run start (serve the production build).

In a Next.js project, what is the purpose of the package.json file?

package.json lists the project's metadata, dependencies, and npm scripts (like dev, build, start), and defines how the project is configured and run.

What is the purpose of the next.config.js file?

next.config.js is the configuration file for customizing Next.js behavior, such as environment variables, redirects, rewrites, image domains, and experimental features.

In the App Router, what is the role of the app/ directory?

The app/ directory holds the application's routes, layouts, and pages using React Server Components; each folder maps to a route segment and defines the routing structure.

In the Pages Router, what is the special role of the pages/ directory?

Each file in pages/ automatically becomes a route based on its filename, and files inside pages/api/ become API endpoints.

What is the purpose of the public/ folder in a Next.js project?

The public/ folder serves static assets (images, fonts, robots.txt, etc.) directly from the root URL; a file at public/logo.png is accessible at /logo.png.

In the App Router, what does a page.js (or page.tsx) file define?

page.js defines the unique UI for a route segment and makes that route publicly accessible; a route is only reachable if it has a page file.

In the App Router, what does a layout.js file do?

layout.js defines shared UI (like headers or navigation) that wraps a segment and its children; layouts persist across navigation and preserve state, and a root layout is required.

In the Pages Router, how does the file pages/about.js map to a URL?

It maps to the route /about — the filename (minus extension) becomes the URL path.

In the Pages Router, what URL does the file pages/index.js correspond to?

The index file maps to the root of its directory, so pages/index.js corresponds to / (the home page).

What is the difference between static routing and dynamic routing in Next.js?

Static routing maps fixed file paths to fixed URLs (e.g., pages/about.js → /about), while dynamic routing uses bracketed parameters (e.g., [id]) to match variable URL segments at runtime.

How do you define a dynamic route in the Pages Router for a URL like /posts/123?

Create a file with square brackets around the parameter name, e.g., pages/posts/[id].js; the value 123 is then available as the id route parameter.

In the App Router, how do you create a dynamic route segment?

Wrap the folder name in square brackets, e.g., app/posts/[id]/page.js. The dynamic value is passed to the page via the params object (params.id).

What is a catch-all route in Next.js and how is it written?

A catch-all route matches multiple path segments using three dots inside brackets, e.g., [...slug].js, which matches /a, /a/b, /a/b/c and provides the segments as an array.

What is the difference between a catch-all route [...slug] and an optional catch-all route [[...slug]]?

[...slug] requires at least one segment to match, while the optional catch-all [[...slug]] (double brackets) also matches the parent route with zero segments.

In the Pages Router, how do you access dynamic route parameters inside a component?

Use the useRouter hook from next/router and read router.query — e.g., const { id } = useRouter().query.

What is the Link component in Next.js and where is it imported from?

Link is Next.js's component for client-side navigation between routes, imported from 'next/link'. It enables SPA-like transitions without a full page reload.

Why should you use the Next.js Link component instead of a plain <a> tag for internal navigation?

Link performs client-side navigation and automatically prefetches linked pages, giving faster transitions without a full page reload, whereas a plain <a> tag triggers a full browser reload.

What is the basic syntax for linking to an /about page with the Next.js Link component?

<Link href="/about">About</Link> — the href prop specifies the destination route.

What does prefetching mean in the context of the Next.js Link component?

Prefetching means Next.js automatically loads the JavaScript/data for a linked route in the background (e.g., when the Link enters the viewport), so navigation feels instant when clicked.

What are API Routes in Next.js?

API Routes let you build backend API endpoints within the same Next.js project. In the Pages Router they live in pages/api/, and each file becomes an HTTP endpoint handled by serverless-style functions.

In the Pages Router, what URL does the file pages/api/users.js map to?

It maps to the endpoint /api/users.

In the Pages Router, what is the standard function signature of an API route handler?

export default function handler(req, res) { ... } — where req is the incoming request object and res is the response object used to send back data.

In the App Router, how do you define an API endpoint (Route Handler)?

Create a route.js (or route.ts) file inside the app directory and export functions named after HTTP methods, e.g., export async function GET(request) { ... } or POST, PUT, DELETE.

Why are Next.js API Routes useful for full-stack development?

They let you write backend logic (database access, authentication, third-party API calls) in the same codebase as your frontend, avoiding a separate server and keeping secrets out of the client bundle.