Zenn
🦁

初めてNext.jsを使って初歩的なルーティングをする

2022/07/25に公開
Next.js
TypeScript
tech

Next.jsをインストール

プロジェクトの作成

node.jsは入っている前提で下記コマンド。

npx create-next-app [product name] --typescript

product nameには好きな名前を入れる。
これで”Success!”と表示されたらOKです。

一旦アプリを立ち上げる

作成したアプリのディレクトリに移動して

npm run dev

http://localhost:3000
で表示されていればNext.jsとtypescriptの環境構築は完了です。

ルーティング

とりあえずは簡単にルーティングを行なってみる

作成したアプリの

  • /app/src
    • pages
      の中にabout.tsxファイルを作成します。
pages/about.tsx

import type { NextPage } from 'next'


const About: NextPage = () => {
	return (
		<div>
			<h1>This is About Page</h1>
		</div>
	)
}

export default About

divダグの中身を簡単に表示するだけです。

  • pages/about.tsx -> http://localhost:3000/about
    とルーティングされるようになります。

ルーティングについてまとめる

pagesディレクトリにファイルを追加した時点でルートとして自動で扱えるようになります。
上記のように同じ/aboutでアクセスしたい場合、

  • pages/about/index.tsx -> http://localhost:3000/about
    の場合でも同じルーティングができます。

ネストされたルーティングについて

ネストされたルートについても同じように

  • pages/about/myprofile.tsx -> http://localhost:3000/about/myprofile
    といった感じで自動でルートが作成されます。

動的にページをルーティングしたい場合

名前をつけたパラメータにマッチさせなければいけませんが、そうすることで動的にルーティングすることができます。

  • pages/blogs/[pid].tsx -> http://localhost:3000/blogs/:pid(pid = 1)
    ファイル名は本当に「[pid].tsx」とします。
pages/blogs/[pid].tsx

import　type { NextPage } from 'next'
import { useRouter } from 'next/router'


const Blog: NextPage = () => {
	// パラメータはクエリオブジェクトとしてページに渡されます
	const route = useRouter()
	const { pid } = route.query

	return (
		<div>
			<h1>Blog Page { pid }</h1>
		</div>
	)
}

export default Blog

これで
http://localhost:3000/blogs/1
にアクセスすれば、「Blog Page 1」とページに表示されます。

ナビゲーションについて

単にアクセスするだけでは面倒なので、こちらも簡単なページ間遷移を作成します。
ReactにLinkコンポーネントが用意されているのでそちらで行います。

pages/_app.tsx

// import 'styles/globals.css';
import Layout from 'components/Layout';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;
components/Layout.tsx

import Head from 'next/head';
import Link from 'next/link';
import { ReactNode } from 'react';

type Props = {
	children?: ReactNode;
};

const Layout = ({ children }: Props) => {
	return (
		<div>
			<Head>
				<title>MyTemplate - sample page</title>
			</Head>

			<header className=''>
				<Link href='/'>
					<a>Home</a>
				</Link>
				<Link href='/blogs'>
					<a>Blog</a>
				</Link>
				<Link href='/blogs/1'>
					<a>Blog single</a>
				</Link>
			</header>

			<div className='content'>{children}</div>

			<footer className=''></footer>
		</div>
	);
};

export default Layout;

これにより各ページにアクセスでき

  • / -> pages/index.tsx
  • /blogs -> pages/blogs/index.tsx
  • /blogs/1 -> pages/blogs/[pid].tsx
    が読み込まれるファイル先の例になります。
    ページが切り替わる場所は、components/Layout.tsxの
<div className='content'>{children}</div>

の部分になります。

以上Next.jsで行う簡単なルーティングでした。

Discussion