Next.js Learn (Basics)でNext.jsの基礎を学んだ
Next.jsの公式チュートリアルNext.js Learn (Basics)でNext.jsの基礎を学んだ。
背景
本ブログは、Next.js+Notionでブログを作れるNotion Blogをベースに構築している。React、nodejs、Next.js等のWebフロントエンドは未経験者なので、ブログのカスタマイズに必要な知識の獲得を目的にチュートリアルを実施した。
内容
チュートリアルは9つのレッスンで構成されている。全部実施するとおよそ3時間程度で終わる。
- Getting Started
- Navigate Between Pages
- Using Shared Components
- Create Dynamic Pages
- Clean URLs with Dynamic Routing
- Fetching Data for Pages
- Styling Components
- API Routes
- Deploying a Next.js App
各レッスンは繋がっており、全部実施すると計4つのアプリを作ることになる。
- Hello World
- プロジェクト作成、サイト内遷移、共有コンポーネントを学ぶ
- Blog
- 動的ページ、動的ルーティング、styled-jsx、Nowへのデプロイ方法を学ぶ
- TV Shows
- ページデータのフェッチを学ぶ
- Famous Quotes
- APIの作り方、使い方を学ぶ
下記リポジトリに各レッスンの開始状態が公開されているため、最初から実施する必要はなく途中からでも可能。
作成したアプリ(Famous Quotes)
{{< figure src=“/posts/2020-03-23-nextjs-learn-basic.png” class=“center” width=“50%” height=“50%” >}}
学習メモ
pages/p/[id].tsxのファイル名の[id]はdynamic route機能を意味するexport default () =>...でReact ComponentをエクスポートするLinkでページ内遷移するgetInitialPropsを使い初回ロード時に実行する処理を記述する