Contents

Next.js Learn (Basics)でNext.jsの基礎を学んだ

Contents

Next.jsの公式チュートリアルNext.js Learn (Basics)でNext.jsの基礎を学んだ。

背景

本ブログは、Next.js+Notionでブログを作れるNotion Blogをベースに構築している。React、nodejs、Next.js等のWebフロントエンドは未経験者なので、ブログのカスタマイズに必要な知識の獲得を目的にチュートリアルを実施した。

内容

チュートリアルは9つのレッスンで構成されている。全部実施するとおよそ3時間程度で終わる。

各レッスンは繋がっており、全部実施すると計4つのアプリを作ることになる。

  • Hello World
    • プロジェクト作成、サイト内遷移、共有コンポーネントを学ぶ
  • Blog
    • 動的ページ、動的ルーティング、styled-jsx、Nowへのデプロイ方法を学ぶ
  • TV Shows
    • ページデータのフェッチを学ぶ
  • Famous Quotes
    • APIの作り方、使い方を学ぶ

下記リポジトリに各レッスンの開始状態が公開されているため、最初から実施する必要はなく途中からでも可能。

作成したアプリ(Famous Quotes)

学習メモ

  • pages/p/[id].tsxのファイル名の[id]はdynamic route機能を意味する
  • export default () =>...でReact Componentをエクスポートする
  • Linkでページ内遷移する
  • getInitialPropsを使い初回ロード時に実行する処理を記述する