Next.js メモ ＆ 爆速セットアップ

前提：Next.jsは、JavaScriptライブラリであるReact開発におけるフレームワーク

Zennというサイトに
爆速セットアップというありがたいサイトがあったので多分こっちの方がいいよ🐾✨

Vercelへデプロイもしておきたい！

以下自分でやったやつ

1.npx　コマンドが使えること

2.フォルダ作成（vscordでファイルを開く)

3.npx create-next-app --example with-typescript {プロジェクト名}

4.起動確認　プロジェクト名の階層に移動して「npm run dev」

5サイトの作成完了


6.Next.jsでSSR、SSGの方法

基本的にpagesディレクトリ配下に作成したページに以下の関数を追加するだけです。

SSGしたい場合
APIなどから取得したデータを元にページを動的に作成する場合・・・getStaticPaths + getStaticProps
動的なページ作成は不要な場合・・・getStaticPropsのみ
SSRしたい場合・・・getServerSideProps
以下はSSGのAPIなどから取得したデータを元にページを動的に作成する場合のサンプルコードです。(残りは公式ドキュメントを参考にしてください。)




```/pages/piyo/[id].tsx
import React from 'react';
import { GetStaticPaths, GetStaticProps } from 'next';

// 型定義：一覧
type Piyo = {
  id: string;
};

// 型定義：詳細
type PiyoDetail = {
  id: string;
  name: string;
  value: string;
};

// 3. あとはgetStaticPathsとgetStaticPropsで作成されたpropsを使用して画面描画する処理を記述してあげればOK
const piyoPage: React.FC<PiyoDetail> = ({ id, name, value }) => (
  <div>
    {`idは${id}、nameは${name}、valueは${value}です。`}
  </div>
);

// 1. まずはここで動的に作成するページデータを取得
export const getStaticPaths: GetStaticPaths = async () => {
  // API叩いて一覧データを取得と仮定
  const response: Piyo[] = await fetch('https://.../piyos');

  // paramsの中のid:はファイル名の[id]の部分と合わせること
  const paths = response.map((piyo: Piyo) => (
    { params: { id: piyo.id } }
  ));

  // これでgetStaticPropsでparamsが使用可能に
  // fallback=falseは存在しないページは404
  return { paths, fallback: false };
};

// 2. ここでpiyoPageでpropsとして使用するデータを取得・作成します
export const getStaticProps: GetStaticProps = async ({ params }) => {
  // API叩いて詳細データを取得と仮定
  const piyoDetail: PiyoDetail = await fetch(`https://.../piyos/${params.id}`);

  // これでpiyoPageでpropsとして使用可能に
  return { props: { piyoDetail } };
};

export default piyoPage;

これでawait fetch('https://.../piyos')で1〜3のidが取得できた場合、
ビルド後に
http://localhost:3000/piyo/1
http://localhost:3000/piyo/2
http://localhost:3000/piyo/3
といった感じでアクセスできるようになります。

8.Chakra UIで遊んでみよう（✖ダークモード）
https://zenn.dev/knjname/articles/20210105tryoutchakraui

Next.jsにChakura導入
https://fwywd.com/tech/next-chakra-ui