Zenn
🖥️

Next.js入門１ ページ追加

に公開
JavaScript
Next.js
React
Tailwind CSS
App Router
tech

記事一覧

  1. Next.js × Docker 最速環境構築
  2. Next.js入門１ ページ追加
  3. Next.js入門２ コンポーネント
  4. Next.js入門３ 無記名関数 & イベントハンドラー
  5. Next.js入門４ Hooks
  6. Next.js入門５ Todoアプリ（タスク一覧）
  7. Next.js入門６ Todoアプリ（タスク追加）
  8. Next.js入門７ Todoアプリ（タスク詳細）
  9. Next.js入門８ Todoアプリ（タスク編集, 削除）

ルーティング

ルーティングとは

特定のURLにアクセスした際に実行する処理を割り当てること

ルーティングの種類

Next.jsのルーティングの種類にはPage RouterとApp Routerがします

これぐらいの考え方で大丈夫です

  • Page Router -> 古い方法
  • App Router -> 新しい方法

今回はApp Routerを使用します。

App Router

App Routerには以下のようなルールがあります

  • appディレクトリ内がルーティングになる
  • page.tsxファイルを使用すること
  • appディレクトリからpage.tsxまでのパスがそのままurlのパスになる

ファイル作成

  1. http://localhost:3000/top でアクセスできるページを作るために、app/topにpage.tsxを作成
.
├── next-app
│   └── app
│       └── top
│           └── page.tsx # ここに作成する
├── docker-compose.yml
└── Dockerfile
  1. page.tsxを記述
// htmlブロックを返す関数を定義
function Page() {
  return (
    <div>トップページ</div>
  );
}

// export default 関数名;　とすることでページ用の関数として使用できる
export default Page;
  1. http://localhost:3000/top にアクセスして以下のような画面が出ればOK

Tailwind CSS

Tailwind CSSとは

特定のクラスにあらかじめスタイルが紐付けられているCSSフレームワーク
-> Next.jsのプロジェクト作成時にインストール済み

使用例

  • page.tsx
function Page() {
    return (
      // tsxファイルではclassの代わりにclassNameを使用する
      // text-red-500クラスはcolor: #ef4444;に相当する
      // text-6xlクラスは見出し1サイズに相当する
      <div className="text-red-500 text-6xl">トップページ</div>
    );
  }
  
export default Page;

チートシート

JavaScriptを使用する

変数の使用

  • page.tsx
function Page() {
  // 変数を定義
  const title = "トップページ";

  return (
    // 中括弧を使用することで変数の値を使用可能
    <div className="text-6xl">{title}</div>
  );
}

export default Page;

条件による表示分岐

  • page.tsx
function Page() {
  const isLoading = true;

  return (
    <div className="text-6xl">
      { isLoading ? "ローディング中..." : "トップページ" }
    </div>
  );
}

export default Page;

ループで繰り返し要素を作成

function Page() {
  const users = [
    { name: "佐藤 太郎", age: 24 },
    { name: "鈴木 花子", age: 30 },
    { name: "高橋 次郎", age: 27 },
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>名前</th>
          <th>年齢</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user, index) => (
          <tr key={index}>
            <td>{user.name}</td>
            <td>{user.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default Page;

Discussion