Next.js - ルーティング / ページ遷移の基本

背景
Next.jsにおけるルーティング
- pagesディレクトリの活用
- componentsディレクトリの活用
  - コンポーネント化
ページ遷移するリンク
- Linkコンポーネント
  - コード
  - 画面
続く…
- コメント
- プログラミングスクールのご紹介 (卒業生より)
参考

背景

実務ではReactを使っているのですがNext.jsのキャッチアップしておきたいと思ったので、その内容を整理したいと思います。

本記事では、Next.jsに関する情報をまとめています。

内容は易しめです。

前回の続きになります！

▶ Next.jsでのSSGの挙動を確認してまとめてみる

Next.jsにおけるルーティング

ReactではReact-Routerなどを用いますが、Next.jsは"pages"ディレクトリ内に作成したファイルは、そのファイル名に対応するURLでアクセス可能なページになります。

Next.jsでは複数のページを作成し、必要に応じて切り替える、といったことが非常に簡単に行うことができます。

pagesディレクトリの活用

"pages"ディレクトリには、アプリケーションの各ページに対応するReactコンポーネントを配置することができます。

pages配下にother.tsxファイルを作成し、以下のようなコードを記述します。

Otherコンポーネントを定義し、その中で表示する要素を作成しています。

// src/pages/other.tsx

export default function Other(props) {
  return (
    <main className="container">
      <h2 className="my-4">Other page.</h2>
      <div className="alert alert-info">
        <p className="h6">This is Other page content.</p>
      </div>
    </main>
  )
}

ファイルを保存したら、http://localhost:3000/otherにアクセスすることで、作成した"other.js"のコンテンツが表示されます。

Next.jsでは、このように"pages"フォルダー内にあるコンポーネントは、自動的にReactコンポーネントとして認識されます。

そのため、Reactでコンポーネントを作成するときと同様にPropsを渡したりスタイルを設定することもできます。

"pages"フォルダー内にサブフォルダーを作成することも可能です。

この場合も、自動的にルーティングが設定されます。

例えば、"pages/blog/post.js"というファイルを作成した場合、"http://localhost:3000/blog/post"にアクセスすることで、そのコンポーネントが表示されるようになります。

componentsディレクトリの活用

componentsディレクトリは、小さな再利用可能なコンポーネントなど、アプリケーションのUIを構成するために使用されます。

Next.jsにおいて、headerやfooterといった共通のレイアウト要素は、"pages"ディレクトリ内に配置するべきではありません。

コンポーネント化

コンポーネントは、可能な限り小さく、再利用可能であることが望ましいです。

index.tsxのheader関連の要素を分割してコンポーネント化しました。

import React from "react";

export type Props = {
  appname: string;
};

export const Header = (props: Props) => {
  return (
    <div>
      <h1 className="h4 bg-secondary text-white p-2">
        {props.appname}
      </h1>
    </div>
  );
}

export default Header;

Headerコンポーネントを_app.tsxで呼び出すことができます。

// src/pages/_app.tsx

import Header from '../../components/header';

function MyApp({ Component, pageProps }) {
...
    <Header appname="Sample app" />
...
}

ページ遷移するリンク

複数のページを用意する際のケースについて紹介していきます。

Next.jsでは、複数のページを用意する際には、通常のタグを使用する代わりに、"Link"コンポーネントを使用してページ間を移動することができます。

Linkコンポーネント

LinkコンポーネントはNext.jsによって提供されるルーティングシステムです。

nextの機能のためimportが必要です。

import Link from 'next/link'

Linkコンポーネントには、hrefプロパティにリンク先のURLを指定しすることでクリックしたときに"/about"ページに遷移することができます。

コード

hrefでパスを指定するだけで、そのページに移動するリンク（<a>タグ）が自動生成されます。

// src/pages/index.tsx

import Link from 'next/link'

<p className="btn btn-outline-primary">
  <Link href="/other">Go Other page.</Link>
</p>

画面

続く…

本記事の内容は以上になります！

続きのアウトプットも随時更新したいと思います。

間違いがありましたら修正いたしますので、ご指摘ください。

興味があれば他の記事も更新していきますので是非ご覧になってください♪

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

参考

https://nextjs.org/docs

Yanonoblog!

こつこつと