What is Next.js?

Next.js is a React framework - it's a tool built on top of React that adds powerful features like routing, optimization, and easy deployment.

The Simple Explanation

Think of it this way:

React is like the engine of a car
Next.js is like the complete car with steering wheel, transmission, and all the features

You could build a car with just an engine, but Next.js gives you everything pre-assembled and working together!

Why We Use Next.js

1. File-Based Routing

Without Next.js: You need to manually set up routes and routing logic

With Next.js: Just create a folder and page.tsx file!

app/
  about/
    page.tsx  → Automatically becomes /about route
  contact/
    page.tsx  → Automatically becomes /contact route

No configuration needed - it just works!

2. Performance Optimization

Next.js automatically:

Optimizes images
Splits code into smaller chunks (faster loading)
Pre-renders pages (better SEO and speed)

3. Easy Deployment

Our website builds to static HTML files that can be hosted anywhere. Next.js handles this entire build process with one command: npm run build

4. Great Developer Experience

Hot reload: See changes instantly without refreshing
Error messages: Clear, helpful error displays
TypeScript support: Built-in, no setup needed

Our Setup: Static Site Generation

Next.js can work in different modes. We use Static Site Generation (SSG):

npm run build → Next.js generates plain HTML files → Host anywhere

What this means:

No server needed
Super fast (just serving HTML)
Cheap/free hosting
Perfect for content websites like ours

What we don't use:

Server-side rendering (SSR)
API routes on the server
Database connections

This makes our codebase simpler and perfect for learning!

App Router vs Pages Router

Next.js has two routing systems. We use the modern one:

App Router (What We Use) ✅

app/
  page.tsx           # Homepage (/)
  about/
    page.tsx         # About page (/about)
  layout.tsx         # Wraps all pages

Benefits:

More intuitive folder structure
Better performance
Nested layouts (shared headers/footers)
This is the future of Next.js

Pages Router (Old System) ❌

pages/
  index.tsx         # Homepage
  about.tsx         # About page

You might see this in older tutorials - ignore those! Our codebase uses App Router.

Key Concepts

1. Pages are Components

Every page.tsx file exports a React component:

export default function AboutPage() {
  return <div>About Us</div>
}

This automatically becomes a page you can visit!

2. Layouts Wrap Pages

layout.tsx files wrap pages with shared UI:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}  {/* Your page goes here */}
        <Footer />
      </body>
    </html>
  )
}

Now every page automatically has a header and footer!

3. File Naming Matters

Special file names in Next.js:

Filename	Purpose
`page.tsx`	Defines a route (visible page)
`layout.tsx`	Wraps pages with shared UI
`loading.tsx`	Shows while page loads
`error.tsx`	Handles errors
`not-found.tsx`	404 page

In our codebase, we mainly use page.tsx and layout.tsx.

How Routing Works

Example: Creating /faq Page

Create folder: app/faq/
Create file: app/faq/page.tsx
Add code:

export default function FAQPage() {
  return <h1>Frequently Asked Questions</h1>
}

That's it! Visit http://localhost:3000/faq and it works!

Nested Routes

app/
  programs/
    page.tsx              → /programs
    student-leaders/
      page.tsx            → /programs/student-leaders

Folders create URL structure automatically.

Commands You'll Use

# Start development server
npm run dev
# Visit http://localhost:3000

# Build for production
npm run build

# Check code quality
npm run lint

These are defined in package.json and use Next.js under the hood.

What You Don't Need to Know

For contributing to our website, you can skip these Next.js features:

❌ Server components vs client components (we use both, but simply)
❌ Server actions
❌ Middleware
❌ Internationalization
❌ Image optimization configuration

Focus on understanding:

✅ File-based routing
✅ Page components
✅ Layouts
✅ How to run dev server

Seeing Next.js in Action

When you start the dev server in Section 02, you'll see:

Hot Reload: Edit a file → Save → Browser updates instantly (no manual refresh!)
Clear Errors: If something breaks, you get a helpful error screen showing exactly where the problem is
Fast Refresh: Changes appear in under 1 second

This makes development feel almost magical!

Common Questions

Q: Is Next.js hard to learn?

A: Not if you know React basics! Next.js mostly just adds conventions (like where to put files). The hard part is React itself, which you'll learn in the next section.

Q: Do I need to read the entire Next.js documentation?

A: No! For our codebase, understanding routing and layouts is enough. Learn deeper features only when you need them.

Q: What's the difference between Next.js and React?

A: React is the UI library. Next.js is a framework that adds routing, building, and optimization on top of React.

External Resources

Essential Reading

Next.js Documentation - App Router: https://nextjs.org/docs
- When to use: Reference when creating pages or working with routing
- Start with: "Getting Started" and "Routing Fundamentals"
Next.js Learn Course: https://nextjs.org/learn
- When to use: If you want a structured, project-based tutorial (optional)
- Time: 2-3 hours

When You're Stuck

Next.js Discord: https://nextjs.org/discord
- When to use: Real-time help with Next.js-specific issues

For now, you don't need to study these deeply. Just knowing they exist is helpful!

Summary

Next.js is:

A React framework (React + extra features)
Used for file-based routing (folders → URLs)
Optimizes performance automatically
Makes development faster and easier

In our project:

We use App Router (modern system)
Static site generation (no server)
Simple patterns (perfect for learning)

What you need to know:

Create page.tsx in a folder → new route
layout.tsx wraps pages with shared UI
npm run dev starts development server

That's the core! Everything else you'll learn by doing.

Next Up

Now that you understand the framework, let's learn about the language:

What is TypeScript? →