0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

File-System Routing Basics

Understand the fundamental concepts of file-system based routing in Next.js and how to create basic pages and routes.

File-System Routing Basics is a free Next.js 15 Fullstack (App Router + Server Actions) lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack (App Router + Server Actions) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Intro to File-System Routing

Next.js routes by your file system — your folder and file layout directly defines your URLs. Files become pages, folders become URL segments.

The Core `app` Directory

Every route lives inside the special app directory — the root of your site's structure. Anything you put there shapes the routing.

Creating a Root Page

A route needs a page.js that default-exports a React component. Place it directly in app/ and it becomes your homepage at /.

Hello Next.js Homepage!

Here's a minimal app/page.js. This component renders at your root URL / — the homepage visitors land on first.

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to CoddyKit!</h1>
      <p>This is your Next.js homepage.</p>
    </div>
  );
}

Folders for Nested Paths

Want a /dashboard route? Make a dashboard folder in app/ and drop a page.js inside. The folder name becomes the URL segment.

The Dashboard Page

This code goes in app/dashboard/page.js. Visit /dashboard and Next.js renders exactly this component.

export default function DashboardPage() {
  return (
    <div>
      <h1>Your Dashboard</h1>
      <p>Here you'll find all your important stats.</p>
    </div>
  );
}

Deeper Nested Routes

Nest as deep as you like — each folder adds a URL segment. So app/products/electronics/page.js maps to /products/electronics. Clean and logical.

Shared UI with `layout.js`

A layout.js defines shared UI that wraps the pages in its folder — perfect for nav bars, footers, and sidebars that stay put across routes.

Route Mapping Quiz

Imagine you have a file located at app/blog/posts/page.js within your Next.js project. What URL path would this file correspond to?

File-System Routing Recap

Recap: the app directory roots all routes, page.js defines a route's UI, folders create nested segments, and layout.js shares UI across them.

Frequently asked questions

Is the “File-System Routing Basics” lesson free?

Yes — the full text of “File-System Routing Basics” is free to read here on the web, and the Next.js 15 Fullstack (App Router + Server Actions) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack (App Router + Server Actions) course, upgrade to CoddyKit PRO.

What will I learn in “File-System Routing Basics”?

Understand the fundamental concepts of file-system based routing in Next.js and how to create basic pages and routes. You practise Next.js 15 Fullstack (App Router + Server Actions) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack (App Router + Server Actions)?

No prior experience is required. Next.js 15 Fullstack (App Router + Server Actions) on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “File-System Routing Basics” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack (App Router + Server Actions) lesson?

Yes. Every Next.js 15 Fullstack (App Router + Server Actions) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Project Setup & CLI
  2. File-System Routing Basics
  3. Pages & Layouts Overview
  4. Styling Your Next.js App
← Back to Next.js 15 Fullstack (App Router + Server Actions)