Next.js 15 Fullstack (App Router + Server Actions) · レッスン

ファイルシステムルーティングの基礎

Next.jsにおけるファイルシステムベースのルーティングの基本概念と、基本的なページやルートの作成方法を理解します

「ファイルシステムルーティングの基礎」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.

よくある質問

「ファイルシステムルーティングの基礎」レッスンは無料ですか？

はい。「ファイルシステムルーティングの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

「ファイルシステムルーティングの基礎」で何を学びますか？

Next.jsにおけるファイルシステムベースのルーティングの基本概念と、基本的なページやルートの作成方法を理解しますブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「ファイルシステムルーティングの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack (App Router + Server Actions)に戻る