MENU
お問い合わせ
主役になり損ねた星、木星。 | Jupyter事業 by Adecco Group
お問い合わせ
  1. ホーム
  2. Next.js
  3. Next.jsをゼロからマスターする Part 4

Next.jsをゼロからマスターする Part 4

Next.js

この講座では、Next.jsを触ったことがない人でも、実際に手を動かしながらNext.jsを学ぶことで、Next.jsの魅力を実感し、ウェブ開発の新たなステージへ進むお手伝いができれば嬉しいです。

今回は、Next.jsのApp Routerについて説明していきます。

目次

Next.jsのプロジェクト作成

Next.jsのプロジェクト作成の手順を説明します。

  • コマンドラインツール（ターミナルやコマンドプロンプト）を開きます。
  • プロジェクトを作成したいディレクトリに移動します。
  • 以下のコマンドを実行して、新しいNext.jsプロジェクトを作成します。

npx create-next-app@latest next-js-tutorial
ここで、”next-js-tutorial”はあなたのプロジェクト名です。好きな名前に変更できます。

  • プロジェクト作成中に表示される設定オプションに答えます。
    TypeScriptを使用するかどうかなど、いくつかの質問があります。

注意: Next.jsのバージョン14.2.12を使用して、プロジェクトを作成した場合の事例です。バージョンが異なると、これらのステップが異なる場合があります。

ステップ回答例 (デフォルト)
Need to install the following packages: create-next-app@14.2.12 Ok to proceed? (y)Returnボタン
?Would you like to use TypeScript?› No / YesYesを選択
?Would you like to use ESLint?› No / YesYesを選択
? Would you like to use Tailwind CSS? › No / YesYesを選択
?Would you like to use src/directory?› No / YesNoを選択
?Would you like to use App Router? (recommended)› No / YesYesを選択
?Would you like to customize the default import alias (@/*)?› No / YesNoを選択

VSCodeでプロジェクトを開く

  • VSCodeを開きます。
  • File ⇨ Open Folderから先ほど作成した「next-js-tutorial」フォルダーを開きます。
  • VSCodeのターミナルを開き「npm run dev」を入力しLocalからNext.js(http://localhost:3000)を開きます。

VSCodeのターミナルを開くショートカット

VSCodeでターミナルを開くショートカットは、オペレーティングシステムによって異なります。以下に各OSでのショートカットを示します。

Windows: Ctrl + `（バッククォート）
Mac: Control + `（バッククォート）
Chromebook: Ctrl + Alt + `（バッククォート）

また、すべてのプラットフォームで共通して使用できる別の方法として、以下のショートカットがあります。

Ctrl + Shift + `（バッククォート）

これらのショートカットを使用することで、VSCode内で素早くターミナルを開くことができます。
もしショートカットキーでターミナルが開かないときは、Terminal⇨New Terminalから開くことができます。

App Router

App Routerは、Next.js 13で導入された新しいルーティングシステムです。
これは、ファイルシステムベースのルーティングを採用し、より直感的で柔軟なルーティング構造を提供します。一方、Page Routerは従来のNext.jsのルーティングシステムで、pages/ディレクトリ内のファイル構造に基づいてルーティングを行います。
App RouterはPage Routerの後継として位置づけられていますが、両者は現在共存しています。
Next.jsは、新規プロジェクトではApp Routerの使用を推奨していますが、既存のプロジェクトではPage Routerも引き続きサポートされています。

URLの構造: ドメイン、セグメント、パス

URLは、ウェブリソースの場所を特定するための標準化された方法です。
URLの構造を理解するには、ドメイン、セグメント、パスという3つの重要な概念を知る必要があります。

1. ドメイン

ドメインは、URLの中で特定のウェブサイトを識別する部分です。
例えば、「https://www.example.com」というURLにおいて、「www.example.com」がドメインにあたります。ドメインは通常、ウェブサイトの名前やブランドを表します。

2. パス

パスは、ドメインの後に続く部分で、ウェブサイト内の特定のページやリソースの場所を示します。例えば、「https://www.example.com/products/shoes」というURLにおいて、「/products/shoes」がパスです。

3. セグメント

セグメントは、パスを構成する個々の要素を指します。パスはスラッシュ（/）で区切られた複数のセグメントから成り立っています。先ほどの例「/products/shoes」では、「products」と「shoes」がそれぞれ独立したセグメントになります。

URLの例

以下の例を見てみましょう。

“https://www.example.com/blog/2024/10/next-js-tutorial”

この URLでは

  • ドメイン: www.example.com
  • パス: /blog/2024/10/next-js-tutorial
  • セグメント:
    • blog
    • 2024
    • 10
    • next-js-tutorial

Next.jsのApp Routerでは、このURLの構造がファイルシステムの構造と直接対応します。
例えば、上記のURLに対応するファイル構造は以下のようになります。

app/
　blog/
　　2024/
　　　 10/
　　　　next-js-tutorial/
　　　　　page.tsx

このように、URLの各セグメントがファイルシステムの各ディレクトリに対応し、最終的なページコンポーネントがpage.tsxファイルとして配置されます。この構造により、Next.jsのApp Routerは直感的で管理しやすいルーティングシステムを提供しています。

ファイルとパスの絶対表示と相対表示

ファイルシステムやURLにおいて、パスを表現する方法には絶対パスと相対パスの2種類があります。これらの違いを理解することは、ファイル操作やウェブ開発において非常に重要です。

1. 絶対パス

絶対パスは、ファイルやディレクトリの完全な場所を、ルートディレクトリから始まる全ての階層を含めて指定する方法です。

  • 特徴：
    • 常に同じ場所を指す
    • ルートディレクトリから始まる
    • 長くなる傾向がある
  • 例：
    • Windowsの場合：C:\\Users\\YourName\\Documents\\file.txt
    • macOS/Linuxの場合：/home/YourName/Documents/file.txt
    • ウェブURL：https://www.example.com/blog/article.html
2. 相対パス

相対パスは、現在の作業ディレクトリ（カレントディレクトリ）を基準として、目的のファイルやディレクトリの場所を指定する方法です。

  • 特徴：
    • 現在の位置に依存する
    • 短く、簡潔に表現できる
    • 同じ構造内でファイルを移動する際に便利
  • 例：
    • 同じディレクトリ内のファイル：file.txt
    • サブディレクトリ内のファイル：subdirectory/file.txt
    • 親ディレクトリ内のファイル：../file.txt

使用上の注意点

  • 絶対パス： システム全体で一意に特定できるため、スクリプトやプログラムで確実にファイルを指定したい場合に適しています。
  • 相対パス： プロジェクト内でのファイル参照や、移植性の高いコードを書く際に便利です。ただし、現在の作業ディレクトリが変わると、参照先も変わる点に注意が必要です。

Next.jsのようなフレームワークでは、しばしば相対パスを使用してコンポーネントやモジュールをインポートします。これにより、プロジェクト構造の変更に柔軟に対応できます。ただし、設定ファイルやビルドスクリプトでは、絶対パスを使用することで、実行環境に依存しない確実な参照を行うことができます。

Next.js 14のApp Routerの基本的なファイル構成

Next.js 14のApp Routerの基本的なファイル構成をツリー図で表すと、以下のようになります。

/
├── app/
│ 　　├── layout.tsx
│ 　　├── page.tsx <——— Home( )
│　　└── globals.css
│
├── public/
├── node_modules/
├── package.json
├── tsconfig.json
│
└── components/
　　　　　├── Header.tsx
　　　　　└── Footer.tsx

この構造は、Next.js 14のApp Routerを使用したプロジェクトの基本的なファイル構成を示しています。
ルートディレクトリには、app/フォルダの他に、public/フォルダ、node_modules/フォルダ、package.json、tsconfig.jsonなどの重要なファイルやディレクトリが含まれています。これらは典型的なNext.jsプロジェクトに存在するものです。

この構造について説明します。

  • app/: App Routerのルートディレクトリ
  • layout.tsx: アプリケーション全体のレイアウト
  • page.tsx: ホームページのコンテンツ
  • globals.css: グローバルスタイル
  • components/: 再利用可能なコンポーネントを格納
  • about/: ‘/about’ルートのディレクトリ
  • [slug]/: 動的ルーティングのためのディレクトリ
  • api/: APIルートを格納するディレクトリ

この構造は基本的なものであり、プロジェクトの要件に応じて拡張できます。

Homeコンポーネントを編集

app/page.tsx

import Link from “next/link”;

export default function Home( ) {

　　 const title = “My Home Page”;

　return (
　　<div>
　　　<h1>{title}</h1>
　　　<Link href=”/about”>Go to About Page</Link>
　　</div>
　);
}

Webブラウザから「https://localhost:3000/」にアクセスする or VSCodeで開いたNext.jsブラウザを更新してください。

上記のスクリーンショットは、編集したHome( )コンポーネントがブラウザで表示された結果を示しています。以下にその内容を解説します。

  • ページのタイトルとして「My Home Page」が表示されています。これは、Home( )コンポーネント内で定義された title 変数の値です。
  • 「Go to About Page」というリンクが表示されています。これは、Link コンポーネントを使用して作成されたもので、クリックすると /about ページに遷移します。
  • ページの内容がシンプルで最小限に保たれています。これは、Next.jsの初期設定で提供されるスタイルやコンポーネントを削除し、基本的な要素のみを残した結果です。

このシンプルな構造は、Next.jsアプリケーションの基本的な機能を示しています。ルーティング（ページ間のリンク）が正常に機能していることが確認でき、開発者はこの基本構造の上に更なる機能やスタイルを追加していくことができます。

AboutPage コンポーネントを作成する

/
├── app/
│　　　├── layout.tsx
│　　　├── page.tsx
│　　　├── globals.css
│　　　└── about/ <——— ディレクトリを作成する
│　　　　　　└── page.tsx <——— AboutPage( ) を作成する
│
├── public/
├── node_modules/
├── package.json
├── tsconfig.json
│
└── components/
　　　　　├── Header.tsx
　　　　　└── Footer.tsx

VSCodeのNew Folder⇨aboutディレクトリを作成し、aboutディレクトリの下に page.tsx ファイルを作成する。

app/about/page.tsx

import Link from “next/link”;

export default function AboutPage() {
return (
　　<div>
　　　<h1>About Page</h1>
　　　<Link href=”/”>Go to Home Page</Link>
　　</div>
　);
}

Webブラウザからhttps://localhost:3000/aboutにアクセスします。

上記のスクリーンショットは、作成したAboutPageコンポーネントがブラウザで表示された結果を示しています。以下にその内容を解説します。

  • ページのタイトルとして「About Page」が表示されています。これは、AboutPage( )コンポーネント内で定義されたh1タグの内容です。
  • 「Go to Home Page」というリンクが表示されています。これは、Linkコンポーネントを使用して作成されたもので、クリックするとホームページ（/）に遷移します。
  • ページの内容がシンプルで最小限に保たれています。これは、基本的な要素のみを含む設計になっているためです。

このシンプルな構造は、Next.jsアプリケーションの基本的なルーティング機能を示しています。
ホームページ（/）とAboutページ（/about）の間を相互にリンクで行き来できることが確認でき、App Routerを使用した基本的なマルチページアプリケーションの構造が実現されています。

Next.js 14のApp Routerにおける動的ルーティング

1. 動的セグメント

動的セグメントは、角括弧[ ]で囲まれたフォルダ名を使用して作成します。
例えば

pp/blog/[slug]/page.tsx

この場合、[slug]が動的セグメントとなり、様々なブログ記事のURLに対応します。

2. パラメータの取得

動的セグメントのパラメータは、ページコンポーネント内でpropsとして受け取ることができます。

interface PageProps {
　params: { slug: string }
}

export default function Page({ params }: PageProps) {
　return <div>My Post: {params.slug}</div>
}

作成したコンポーネントをインポートしてページに表示させる

ページ内でつかう”部品”を、Reactコンポーネントの形式で作り、Next.jsのページにインポートして、表示させてみます。

まず、VSCodeのNew Folder⇨componentsディレクトリを作成し、その中にNavbar.tsxとFooter.tsxファイルを作成します。 以下は、ディレクトリ構造を示すツリー図です。

my-next-app/
├── app/
│　　　├── layout.tsx
│　　　├── page.tsx
│　　　└── about/
│ 　　　　　　└── page.tsx
├── components/　　 <——— ディレクトリを作成する
│ ├── Navbar.tsx　　 <——— Navbar.tsx を作成する
│ └── Footer.tsx　　 <——— Footer.tsx を作成する
├── public/
└── package.json

この構造では、componentsディレクトリがアプリケーションのルートに配置され、その中にNavbar.tsxとFooter.tsxが作成されています。

1. Navbarコンポーネントの作成

./components/Navbar.tsx を作成し、以下のコードを追加します。

import Link from ‘next/link’;

const Navbar = ( ) => {
　return (
　　<nav>
　　　<Link href=”/”>Home</Link>
　　　<Link href=”/about”>About</Link>
　　</nav>
　);
};

export default Navbar;

2. Footerコンポーネントの作成

./components/Footer.tsx を作成し、以下のコードを追加します。

const Footer = ( ) => {
　　return (
　　　<footer>
　　　　<p>&copy; 2024 My Next.js App</p>
　　　</footer>

export default Footer;

3. Home()コンポーネントでの使用

app/page.tsx を以下のように更新して、NavbarとFooterコンポーネントを使用します。

import Link from “next/link”;
import Navbar from “../components/Navbar”;
import Footer from “../components/Footer”;

export default function Home( ) {
　const title = “My Home Page”;

　return (
　　<div>
　　　<Navbar />
　　　<main>
　　　<h1>{title}</h1>
　　　　<Link href=”/about”>Go to About Page</Link>
　　　</main>
　　　<Footer />
　　</div>
　);
}

Webブラウザからhttps://localhost:3000/aboutにアクセスします。

このコードでは、Navbar コンポーネントをページの上部に、Footer コンポーネントをページの下部に配置しています。
メインコンテンツは <main> タグ内に配置されています。
これにより、ナビゲーションバーとフッターが Home ページに表示されるようになります。
同様の方法で、他のページコンポーネントでも Navbar と Footer を使用できます。

注意：コンポーネントのインポートパスは、ファイルの位置関係に応じて適切に調整してください。
この例では、components ディレクトリが app ディレクトリの親ディレクトリにあることを前提としています。

@記法を使ってimport文を書く事ができる

ファイルのパスを@マークを使って書く事もできます。
@の位置は、Next.jsのプロジェクト

import Link from “next/link”;
import Navbar from “@/components/Navbar”;//
(↑ “../components/Navbar” から@を使った絶対表示に変更した )
import Footer from “@/components/Footer”;//
(↑”../components/Footer” から@を使った絶対表示に変更した)

export default function Home( ) {
　const title = “My Home Page”;

　return (
　　<div>
　　　<Navbar/>
　　　<main>
　　　　<h1>{title}</h1>
　　　　<Link href=”/about”>Go to About Page</Link>
　　　</main>
　　　<Footer/>
　　</div>
　);
}

@の位置をカスタマイズするには、以下の手順を行います。

  • プロジェクトのルートディレクトリにある tsconfig.json ファイルを開きます。
  • compilerOptions オブジェクト内に paths オプションを追加または編集します。

{
　”compilerOptions”: {
　　”baseUrl”: “.”,
　　”paths”: {
　　　”@/“: [“./“]
　　}
　}
}

この設定により、@がプロジェクトのルートディレクトリを指すようになります。

  • 必要に応じて、paths オプション内で他のエイリアスを追加できます。
    例えば

{
　”compilerOptions”: {
　　”baseUrl”: “.”,
　　”paths”: {
　　　”@/“: [“./“],
　　　”@components/“: [“./components/“],
　　　”@styles/“: [“./styles/“]
　　}
　}
}

これにより、@componentsや@stylesなどのカスタムエイリアスを使用できるようになります。

  • 設定を保存し、開発サーバーを再起動して変更を反映させます。

この設定により、プロジェクト内でより柔軟なインポートパスを使用できるようになります。

Next.js
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次