VOLUME 1: NEXT.JS FUNDAMENTALS

PART 1: UNDERSTANDING THE BASICS

What is Next.js?

Next.js is a framework built on top of React that makes building web applications easier, faster, and more powerful. Think of React as the engine of a car, and Next.js as the entire car with steering, brakes, and navigation already built in.

When you use just React, you have to make a lot of decisions yourself:

• How do I organize my files?
• How do I handle routing (navigation between pages)?
• How do I fetch data from servers?
• How do I optimize for search engines?
• How do I deploy my app?

Next.js answers all these questions and provides you with the tools to do them the right way.

Why Does Next.js Exist?

Before Next.js became popular, developers who used React had to manually set up a lot of things. Here’s what they had to do:

1. Routing: React doesn’t have built-in routing. Developers had to install React Router and configure it themselves.
2. File organization: There was no standard way to organize files. Everyone did it differently.
3. API development: You needed a separate server (like Node.js/Express) to create APIs.
4. Performance: React apps had to be manually optimized for performance.
5. SEO: React apps were hard to optimize for search engines because the content was rendered in the browser.

Next.js was created by a company called Vercel to solve these problems. It gives you:

• File-based routing: Organize files in a folder, automatically get routes
• Built-in API routes: Create APIs without a separate server
• Server-side rendering: Render content on the server for better SEO and performance
• Optimization: Images, fonts, and code are automatically optimized
• Deployment: One-click deployment to Vercel

React vs Next.js

Let me explain the difference clearly:

React:

• Library for building user interfaces
• You build reusable components
• You manage your own routing, file structure, and architecture
• Client-side rendering (everything happens in the browser)
• Good for interactive parts of websites

Next.js:

• Framework built on React
• Gives you a complete structure and best practices
• Routing and API routes included
• Mix of server-side and client-side rendering
• Better for complete applications, SEO, and performance

Real-world example: Netflix

Netflix’s website needs:

1. Pages that load fast
2. SEO for searching (when people search “Netflix”, it should appear)
3. APIs to fetch movie data
4. Many different pages (home, browse, user profile, etc.)

With just React, Netflix engineers would need to:

• Set up routing manually
• Create separate backend for APIs
• Optimize images and code manually
• Handle SEO manually

With Next.js, most of this is built-in. They just write their components and features.

When to Use Next.js

Use Next.js when you’re building:

• Websites (blogs, portfolios, marketing sites)
• Full-stack applications (apps that need databases and APIs)
• Admin dashboards
• SaaS products (software as a service)
• E-commerce websites
• Social media apps

Don’t use Next.js when you’re building:

• Simple interactive widgets
• Mobile apps
• Desktop applications

Key Concepts We’ll Learn

Throughout this course, we’ll cover:

1. Routing: How to create pages and navigation
2. Layouts: How to share UI across multiple pages
3. Server Components: Running code on the server
4. Client Components: Running code in the browser
5. API Routes: Creating backend APIs
6. Data Fetching: Getting data from databases and APIs
7. Authentication: User login and security
8. Deployment: Putting your app on the internet
9. Optimization: Making your app fast and efficient

Let’s start building!

PART 2: SETTING UP NEXT.JS

Your First Next.js Project

Before we start, make sure you have:

• Node.js installed (version 18.17 or later)
• A code editor (VS Code is popular)
• Basic knowledge of JavaScript and React

Let’s create your first Next.js project:

npx create-next-app@latest my-first-app

When it asks questions, choose:

• TypeScript? → No (we’ll use JavaScript for now)
• ESLint? → Yes (helps catch mistakes)
• Tailwind CSS? → Yes (for styling)
• src/ directory? → No
• App Router? → Yes (this is modern)
• Turbopack? → No (we’ll use the standard setup)

After this runs, navigate into your project:

cd my-first-app

Now start the development server:

npm run dev

Open your browser and go to http://localhost:3000

You should see a Next.js welcome page. Congratulations! You’ve created your first Next.js app.

Understanding the Folder Structure

When the project was created, Next.js made this structure:

my-first-app/
├── app/
│   ├── layout.js
│   ├── page.js
│   └── globals.css
├── public/
├── node_modules/
├── package.json
├── next.config.js
└── .gitignore

Let me explain each important folder:

app/ – This is where all your pages and routes live. We’ll spend most of our time here.

public/ – Files here are served as-is. Put images, logos, and static files here.

package.json – Lists all the dependencies (libraries) your project uses.

node_modules/ – Contains all the actual code of the libraries. Don’t touch this.

next.config.js – Configuration file for Next.js. We’ll use this for settings.

Key Files to Understand

Let’s look at the main files:

app/page.js – This is the home page (the page people see when they visit your website). When you go to http://localhost:3000, Next.js shows this file.

app/layout.js – This is a layout file. It wraps around all pages. Think of it as a template that all pages use.

Let’s look at what’s in app/page.js:

export default function Home() {
  return (
    <main>
      <h1>Welcome to my app!</h1>
    </main>
  );
}

This is a React component. It returns JSX (HTML-like syntax). When you visit the homepage, this component is rendered and shown to the user.

Let’s modify it to understand how changes work:

export default function Home() {
  return (
    <main>
      <h1>Hello, World!</h1>
      <p>This is my first Next.js app</p>
    </main>
  );
}

Save the file. Notice your browser automatically refreshes and shows the new content. This is called “hot module reloading” or “fast refresh”. It’s one of the amazing features of Next.js development.

What Happens Behind the Scenes

When you save a file, Next.js:

1. Detects the change
2. Rebuilds the page in the background
3. Sends the new code to your browser
4. Updates what you see without refreshing

This makes development super fast and smooth.

Understanding exports in Next.js

Notice we wrote export default function Home() {...}

The export default is important. It means “this is the main thing I’m exporting from this file”. Next.js uses this to know what to show.

Every page in Next.js must export a default component:

// ✅ Correct
export default function HomePage() {
  return <h1>Home</h1>;
}

// ❌ Wrong - not exported
function HomePage() {
  return <h1>Home</h1>;
}

// ❌ Wrong - not default export
export function HomePage() {
  return <h1>Home</h1>;
}

Common Beginner Mistake #1: Forgetting to export

New developers often forget to export their component:

// ❌ This won't work
function Home() {
  return <div>Hello</div>;
}

Next.js will show an error because it can’t find the component to display.

Always remember: Every page needs export default

Quiz: Understanding the Setup

1. What does Next.js do that React doesn’t?
2. Where do you put page files in Next.js?
3. What happens when you save a file while the dev server is running?
4. Why do we need export default in pages?