Next.js Foundations 🚀

In this module of our Full-Stack Development Course, we dive into Next.js, a powerful React framework that makes building fast, scalable, and SEO-friendly web applications easier than ever. Next.js goes beyond traditional React by offering server-side rendering (SSR), static site generation (SSG), and API routes, making it perfect for modern full-stack applications. Throughout this course, we’ll progressively build a feature-rich blogging and content management system (CMS), learning how to fetch and mutate data, optimize performance, and secure our app with authentication. By the end, you’ll have the essential skills to develop and deploy production-ready full-stack applications with Next.js! 🚀 

While we will use a project with some boilerplate, let's first take a look at how can you quickly start a new project with Next.js!

🎬 Starting from Scratch

If you want to create a clean new Next.js project, you can use the the following command, which will take you through series of questions to set up your project:

pnpx create-next-app@latest

This is what you can observe in the console:

Let's break it down!

1. What is your project named?

Example: my-test-project

This defines the name of your project folder. Whatever you enter here will be used as the directory name where your Next.js project is initialized.

📌 Effect: Creates a folder with this name and sets up a Next.js project inside it.

2. Would you like to use TypeScript? (No / Yes)

TypeScript is a superset of JavaScript that adds static typing, which helps catch errors at compile time rather than runtime.

• Yes → The project will be set up with TypeScript, and .ts/.tsx files will be used instead of .js/.jsx.
• No → The project will use plain JavaScript.

📌 Effect: If enabled, Next.js generates a tsconfig.json file and ensures TypeScript is properly configured.

3. Would you like to use ESLint? (No / Yes)

ESLint is a tool that helps enforce consistent coding style and catch common errors in JavaScript/TypeScript.

• Yes → A .eslintrc.json file is created with Next.js-specific linting rules.
• No → No linting setup is included.

📌 Effect: Helps maintain clean, readable, and bug-free code.

4. Would you like to use Tailwind CSS? (No / Yes)

Tailwind CSS is a utility-first CSS framework that allows for rapid UI styling using predefined classes.

• Yes → Tailwind CSS is installed and configured in tailwind.config.js.
• No → No CSS framework is included (you can add your own later). The initial project will use CSS modules

📌 Effect: If enabled, Next.js will automatically configure Tailwind CSS and PostCSS for styling.

5. Would you like your code inside a src/ directory? (No / Yes)

By default, Next.js places its files (pages/, components/, etc.) in the root directory. Enabling this option moves everything inside a src/ folder, making the root cleaner.

• Yes → The project structure will look like:

/my-test-project
├── /src
│   ├── /app (or /pages if using Pages Router)
│   ├── /components
│   ├── /styles

• No → All project files remain at the root level.

📌 Effect: Organizes the code into a src/ folder for better project structure.

6. Would you like to use App Router? (recommended) (No / Yes)

Next.js has two routing strategies:

• Pages Router (Legacy) → Uses pages/ directory and file-based routing (e.g., pages/index.js).
• App Router (Recommended) → Uses app/ directory and introduces React Server Components for improved performance.
• Yes → The project is set up with App Router (app/ directory), supporting modern features like Server Actions and Streaming.
• No → Uses the older Pages Router (pages/ directory).

📌 Effect: Choosing App Router enables the latest Next.js features and optimizations.

7. Would you like to use Turbopack for next dev? (No / Yes)

Turbopack is Next.js’ new Rust-based bundler that replaces Webpack for local development.

• Yes → Uses Turbopack, which provides faster startup and hot reloading times.
• No → Uses Webpack instead, which is more stable but slower.

📌 Effect: Choosing Turbopack makes development faster but is still in progress for some features.

8. Would you like to customize the import alias (@/* by default)? (No / Yes)

Next.js allows you to use import aliases to make importing files easier. By default, it uses:

import Button from '@/components/Button';

Instead of:

import Button from '../../components/Button';

• Yes → You can define a custom alias (e.g., ~/ instead of @/).
• No → Uses the default alias @/.

📌 Effect: Helps with cleaner imports, especially in large projects.

9. What import alias would you like configured? (Default: @/*)

If you chose “Yes” in the previous question, you can customize the alias.

• Example: Entering ~/ would let you do:

import Button from '~/components/Button';

📌 Effect: Creates a tsconfig.json or jsconfig.json file with a custom alias setting.

Final Thoughts

These options let you tailor your Next.js project based on your preferences and needs. If you’re new to Next.js, using the recommended defaults (TypeScript, ESLint, Tailwind, App Router) is a great way to get started with modern best practices. 🚀

Folder Structure

Next.js follows a convention-based folder structure that helps organize your project efficiently. Depending on whether you use the App Router (app/ directory) or Pages Router (pages/ directory), the structure will differ slightly. We will focus on app router only

Introduced in Next.js 13, the App Router uses React Server Components by default and enables powerful features like layouts, streaming, and server actions.

/my-next-app
├── /app
│   ├── /layout.tsx
│   ├── /page.tsx
│   ├── /dashboard
│   │   ├── /page.tsx
│   │   ├── /settings
│   │   │   ├── /page.tsx
│   ├── /api
│   │   ├── /route.ts
├── /components
├── /lib
├── /public
├── /styles
├── /utils
├── /node_modules
├── .gitignore
├── next.config.js
├── package.json
├── tsconfig.json

Key Folders & Files in app/ Directory
    •    app/ → The main folder where pages, layouts, and API routes live.
    •    app/layout.tsx → Defines the root layout for the application (persists across all pages).
    •    app/page.tsx → The default home page (/).
    •    app/dashboard/page.tsx → A route for /dashboard.
    •    app/dashboard/settings/page.tsx → A nested route for /dashboard/settings.
    •    app/api/route.ts → Defines API endpoints (e.g., /api).

📌 App Router Benefits:

✅ Uses React Server Components for better performance.
✅ Supports nested layouts and loading states.
✅ Enables streaming and server-side rendering (SSR) by default.

Running The Project

To run the Next.js project, please run the following command in the web project directory

pnpm run

This starts the development server at http://localhost:3000. If you are running multiple applications, the port may change and you may see the following message:

$ pnpm dev

> my-test-project@0.1.0 dev /Users/30031005/Github/WSU/FSD/my-test-project
> next dev --turbopack

 ⚠ Port 3000 is in use, trying 3001 instead.
   ▲ Next.js 15.1.7 (Turbopack)
   - Local:        http://localhost:3001
   - Network:      http://192.168.1.184:3001

In this case I would open the project at the following URL: http://localhost:3001. When you open the browser at that URL, you should see the following:

Our (Monorepo) Project

In this chapter we will be working in the same code base from your second assignment. To learn how to set it up, please follow instructions here:.

We recommend you to create a new “Lecture” branch to play with exercises in the lecture.