Next.js Tutorial for Beginners - Part One

November 21, 2025•8 min read
#career#learning#mindset

React is excellent for building user interfaces, but it doesn’t include many of the tools needed to build a full web application. Out of the box, React doesn’t handle routing, server-side rendering, SEO optimization, API endpoints, or performance optimizations.

If you try to build a production-ready application with only React, you often end up installing and configuring many external libraries: React Router, Axios, Vite/Webpack, server frameworks, SSR tools, and more. Managing all of this yourself quickly becomes complicated and makes your code harder to maintain.

This is exactly the problem Next.js solves. Next.js combines React with routing, server rendering, data fetching, file-based organization, and backend logic, all in one environment and already configured for you. Instead of managing a collection of separate tools and libraries on your own, Next.js gives you a complete, unified setup right from the start.

Prerequisite

Before you proceed, make sure you have:

  • Basic knowledge of JavaScript and TypeScript
  • Familiarity with React fundamentals (components, props, JSX)
  • Node.js 20.9 or later installed on your computer. You can download it here.

Goals

  • Understand the core concepts of Next.js and how the App Router works.
  • Build a practical, real-world Movie Browsing App that applies each concept step by step.

You can explore the full project here:

Key Terms You Should Know

Before we dive into it, let’s clarify a few important technical terms you’ll see throughout this tutorial. Understanding these will help you follow along more easily:

  • Routing: The process by which your application determines the page or content to display when a user visits a specific URL. In Next.js, routing is mostly file-based; you create folders and files, and each one automatically becomes a route in your app.
  • Route: A route is simply a specific URL path in your application, like /about, /contact, or /movies. URL paths such as /products/shoes are also routes. Each route represents a different page that a user can visit.
  • App Router: This refers to the setup in a Next.js application that controls how pages are created and connected within your project. Next.js reads the folders and files inside the app/ directory and automatically turns them into URLs. Each folder represents a segment of a route, and special files like page.tsx, layout.js, and loading.js tell Next.js how that part of the app should behave.
  • Segment: A segment is a single part of a route, and in the App Router, each segment is represented by a folder inside the app/ directory. For example, in the route /products/shoes, the segments are products and shoes.

What We’ll be Building

In this tutorial, we’ll build a Movie Browsing Application that has:

  • A homepage
  • About page
  • A movie page that fetches a list of popular films from a real public API
  • Individual movie pages using dynamic routes to show movie details
  • Loading and error states
  • Clean, responsive UI styled with Tailwind
  • Optimized images, metadata, and a shared layout
  • A search bar where users can type to search for movies

By the end, you’ll have a strong foundation to start building your own production-ready Next.js applications.

Setting Up Next.js

Before we start writing any code, we need to create a new Next.js project. Fortunately, Next.js comes with a command-line tool that handles all the setup for you.

To create a new project, open your terminal and run:

npx create-next-app@latest my-app

You’ll be asked a few setup questions (TypeScript, Tailwind, the App Router, etc.). For this tutorial, simply press Enter to accept all the recommended defaults.
Once the installation finishes, move into your new project folder:

cd my-app

Then start the development server:

npm run dev

You’ll see a local URL such as:

http://localhost:3000

Open it in your browser and you’ll see a fresh Next.js project already running.

At this point, you have everything you need to begin this tutorial.

  • An app/ directory for routing
  • A default layout page
  • A homepage
  • A development environment that reloads automatically whenever you save changes.

If you open the project in your code editor, you’ll notice a clean structure. The app/ folder contains your routes, globals.css contains your global styles, and the rest of the files give you a fully configured foundation to start building immediately.

Remove Tailwind’s Default Styling

When you create a new Next.js project, Tailwind CSS comes preinstalled along with some default styles in app/globals.css. For this tutorial, we want a clean starting point so your project matches the screenshots and code samples exactly.

Open app/globals.css.

Keep the first line:

@import "tailwindcss";

Then comment out or delete everything below it:

@import "tailwindcss";
 
/* :root {
  --background: #ffffff;
  --foreground: #171717;
}
 
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
 
body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
} */

Next, open app/layout.tsx and update it by commenting out the global CSS import:

// import "./globals.css"; // Comment out Tailwind’s default global styles
 
export const metadata = {
  title: "My Next.js App",
  description: "Learning Next.js step by step",
};
 
export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

(We will re-enable this import later when we get to Tailwind styling.)

This keeps Tailwind fully enabled, but removes the default styling so your layout and pages look exactly like the examples you’ll build throughout this tutorial.

Understanding the Folder Structure

After creating your Next.js project, one of the first things you’ll notice is that it comes with a clean, well-organized folder structure. This structure defines how your application works, where your pages live, and how routing works.

Here’s a quick overview of the most important parts:

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

app/

This is the heart of your application. Every folder and file inside app/ contributes to your routing system.

  • page.tsx creates a route
  • layout.js acts as a wrapper component that ensures common elements such as headers, footers, sidebars, and navigation bars remain consistent across multiple pages.
  • Folders inside app/ → automatically become segments.

You’ll spend most of your development time inside this app/ folder.

public/

A place for static files such as images, icons, and fonts. Anything inside this folder can be accessed directly through the browser.

globals.css

Your global stylesheet. Any CSS code you place here applies to every page in the app. This file is also where Tailwind’s base styles are imported.

package.json

Tracks your project’s dependencies and scripts. When you run commands like npm run dev, this file is what makes it possible.

next.config.js

Your project’s configuration file. You’ll rarely need to touch it when starting out, but it becomes useful for optimizations and advanced features later.

Your First Steps Inside a New Next.js Project

Let’s start by customizing the homepage so you can get a feel for how routing works in the App Router.

Open app/page.tsx, delete the existing default code, and replace it with:

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

Save the file. Your browser will reload instantly, and you should see the content you just added on the homepage. This is one of the nicest parts of the App Router: every page.tsx file is automatically treated as a route.

Now, let’s create a second page to understand routing more clearly. Inside the app/ directory, create a new folder named about, and inside it, add a page.tsx file:

app/
 ├─ page.tsx
 ├─ layout.js
 └─ about/
     └─ page.tsx

In app/about/page.tsx, add this save:

export default function About() {
  return (
    <main>
      <h1>About Page</h1>
      <p>This is the About page.</p>
    </main>
  );
}

Now open:

http://localhost:3000/about

Your new page is already live.

Why This Works

This is the core idea behind the App Router in Next.js:

Create a folder → add page.tsx → you get a new route.

There’s no routing configuration, no special APIs, and nothing else to set up. The folder structure is the routing system.