SoBlog

主にプログラミングに関する記事を投稿します

NEXT.jsまとめ

環境構築

各コマンド

// 雛形作成(xxxは雛形名)
npx create-next-app xxx
// 開発環境スタート
npm run dev
// ビルド
npm run build
// ビルドしたものが見れる
npm run start

VSCodeにNextjs snippetsを入れてnfでタイプ補完

基礎

SSGはビルド時にSSRはリクエスト時にレンダリングされる
pagesディレクトリ内のファイルが直接ルーティング先となる
aタグ(リロードあり)ではなくLinkコンポーネント(リロードなし)を使う
静的画像はpublicディレクトに入れる
cssモジュールはxxx.module.cssとする

// stylesとするのが一般的
import styles from 'xxx.module.css'

<div className={styles.xx}>

SSGの記述例

// getStaticPropsによりビルド時に一度だけデータを取得する
// returnはprops: {xxx}とする
export async function getStaticProps() {
  const allPostsData = getPostData(); // id, title, data, thumbnail

  return {
    props: {
      allPostsData,
    },
  };
}

動的ルーティングはpages/[id].jsのようにpagesディレクトリ配下に[].jsファイルを作成する
getStaticPathsにより外部のデータに対してもSSGを行う

export async function getStaticPaths() {
  const paths = getAllPostIds();

  return {
    paths,
    fallback: false, // pathsに含まれていないpathにアクセスすると404を返す
  };
}

getStaticPathsの後にgetStaticPropsを使う（セットで使う）
開発環境ではSSGもSSRとなりビルド・デプロイするとSSGとなる

参考文献

Shin Code, udemy, 【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

翻译：