Nextjsチュートリアル１（テンプレート作成とルーティング）

最近の肌感覚

新卒で働き始めてからここ数年設計作業ばっかりでソースを読むとしてもStruts+JSP+Javaみたいな古の組み合わせばっかりだった。

一部Angular＋Typescriptの仕事もあったのでその辺は多少勉強したもののAngularのhtmlにロジック埋め込むスタイルがやっぱりしっくりこなかった。

この辺の感覚としてはむしろ趣味レベルで触っていたReactの方が好みだった。

（JSPやSpringFrameworkも仕事で触っていたころも同じ感覚だった）

転職したものの直近はやっぱり古の構成ばかりなのでちょっと食傷気味。

最近ちょっと時間（＋気持ち）的に余裕が出てきたのでReactベースのNextjsを触ってみることにする。

Nextjsのチュートリアルはここを参考に適宜個別に設定を入れている。

また、フォルダ名やファイル名、クラス名などの各名称は自分が作成したいものに合わせている。

Nextjsテンプレートの作成

まずはアプリのテンプレートを作成する。

Typescriptを使うので --typescriptオプションとnpmを使うので--use-npmオプションを付与している。

あとは next devあるいはnpm run devコマンドを実行するとアプリが立ち上がる。

npx create-next-app [アプリ名] --typescript --use-npm

ルーティング（ページ遷移定義）の方法

続いてページを追加しページ遷移、ルーティングにについて確認する。

まずはアプリケーション直下にpagesフォルダがあるのでまずはlistフォルダを作成し、その中にvtuber.tsxファイルを作成する。作成したファイルにはカリで以下のように記載する。

import type { NextPage } from 'next';
const VtuberListPage: NextPage = () => {
    return <h1>Vtuber List</h1>;
};
export default VtuberListPage;

ここまででフォルダ構成としては以下のようになっている。

ルーティングはpagesフォルダ配下の構造がそのままルーティングになっている。そのため上記で作成したページにアクセスURLは以下となる。

http://localhost:3000/list/vtuber

./
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── api
│   ├── index.tsx
│   └── list
│     └── vtuber.tsx
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tsconfig.json

また、URL直打ちせずともLinkコンポーネントを以下のように使うことでページからページへの遷移を実装することができる。

import Link from 'next/link';
// 省略
const Home: NextPage = () => {
    return (
// 省略
            <main className={styles.main}>
                <h1 className="title">
                    <Link href="/list/vtuber">
                        <a>Go List Page</a>
                    </Link>
                </h1>
// 省略

今日はとりあえずここまで。続きはまた次回。

（小刻みでも更新を習慣化したい。。。）