Next.jsのチュートリアルをやったので、内容や感想などを書きます。チュートリアルは英語ですが、翻訳機能を使えば簡単でした。
チュートリアルでは、簡易的なブログアプリの作成を行います。最終的に完成するwebアプリがデモとして、このページで公開されています
チュートリアルはいくつかの章に分けてあり、各章のタイトルは以下のようになっています。
-
- Next.jsアプリの作成
- ページ遷移
- Assets, Metadata, CSS
- 事前レンダリングとデータ取得
- 動的ルーティング
- APIルーティング
- デプロイ
Reactの基本的な知識があることが前提となっており、React未経験の場合は、Reactのチュートリアルを先に行うことが推奨されています。各章の最初には、前章までを完走したコードがVercelのリポジトリに載せてあります。全てのチュートリアルを通して行うのでなく自分の気になった箇所のみを学ぶこともできます。
Next.jsアプリの作成
チュートリアル用のリポジトリが用意されており、それを元にcreate-next-appを使ってアプリケーションの雛形を作成します。開発サーバーを起動して動作確認し、ページの一部の文字を変更して反映されているか確認します。
ページ遷移
Next.jsでは、ディレクトリ名やファイル名にしたがって、各ページのpathが決まっています。pages/内にコンポーネントを作成して、その仕様を学びます。
- pages/index.js → http://localhost:3000/
- pages/posts/first-post.js → http://localhost:3000/posts/first-post
また<Link>を使ったページ遷移を行い、<a>を使ったページ遷移との違いのほか、コードの分割とプリフェッチの仕様についても説明文を読んで学びます。
Assets, Metadata, CSS
この章では以下のことを学びます。
- 静的アセットの追加方法
- メタデータの追加
- scriptの読み込み
- CSSの追加
用意された画像を/publicフォルダに配置し、<Image>を使って画像を最適化した上で表示します。
<Head>を使ってtitleタグを追加し、タブのタイトルが変更されているか確認します。
例としてFaceBook SDKのスクリプトを追加します。<Script>を使うことで、読み込み動作を調整してスクリプトの追加を最適化することができます。
css modulesを使うことでクラス名が衝突することを防ぎながら、スタイルを追加します。コンポーネント単位のスタイルや、グローバルのスタイルの当て方をそれぞれ実践します。そのほか、clsxを使ったスタイルの切り替えや、PostCssを使ったCSSのコンパイル、Sassの導入方法など触りの部分のみですが説明が書かれています。
事前レンダリングとデータ取得
この章では、外部にあるデータをアプリから取得(フェッチ)することを通して、事前レンダリングについて学びます。
まず図解された説明を読み、プリレンダリング、静的生成、サーバーサイドレンダリングなどの用語を理解します。
次に、ブログの内容をアプリからフェッチしてレンダリングする方法を実践します。 posts/以下に配置したマークダウン形式のファイル(.md)を読み込み、getStaticPropsを使って静的生成を行います。 もしサーバーサイドレンダリングを行いたい場合はgetServerSidePropsを使います。
次に、ブログの内容をアプリからフェッチしてレンダリングする方法を実践します。 posts/以下に配置したマークダウン形式のファイル(.md)を読み込み、getStaticPropsを使って静的生成を行います。 もしサーバーサイドレンダリングを行いたい場合はgetServerSidePropsを使います。
動的ルート
パスによって指定されたデータを取得する処理を実装して、動的ルートについて学びます。
- http://localhost:3000/posts/ssg-ssrにアクセス
- http://localhost:3000/posts/pre-renderingにアクセス
→posts/ssg-ssr.mdをフェッチして投稿ページをレンダリング
→posts/pre-rendering.mdをフェッチして投稿ページをレンダリング
Next.jsでは、[id].jsのようにファイル名が[]で挟まれている場合、動的ルートが行われます。 チュートリアルでは以下の操作を行い動的ルートを実装します。
- pages/[id].jsを作成
- getStaticPaths関数からidとして利用可能な文字列の配列を返す
- getStaticPropsでパスに含まれるidを受け取り、フェッチとレンダリングを行う
この章まででブログアプリは完成です。デプロイはしていませんが、デモで公開されているブログアプリと同じものが作成できました。
APIルート
既に前章まででブログアプリは完成していますが、最後にAPIルートについても紹介されています。前章まではフロント側のコードでしたが、この章ではバックエンド側で動作するコードを書きます。
APIルートを使用すると、Next.jsアプリ内にAPIエンドポイントを作成できます。
pages/api/hello.jsを作成して、handler関数を作成します。その後http://localhost:3000/api/helloにアクセスすると、json形式のレスポンスを受け取ることができます。
{"text":"Hello"}
感想
簡単なチュートリアルでしたが、実用性のありそうなブログサイトが作れて楽しかったです。自分は普段Reactばかり触っていてNext.jsは初めてでした。 Reactと文法はほとんど同じですが、
- <Link>や<Image>などNext.jsに組み込まれたコンポーネント
- SSRやSSGなどサーバーサイドでのプリレンダリング機能
- APIのエンドポイントを作成できる点
など違う部分も多くありました。チュートリアルだけではまだ理解しきれていない部分も多くあるので、もう少し触ってみようと思います。
2
