技術的備忘録

基本自分用備忘録

トップ > Next.js > Next.jsチュートリアルまとめ

Next.jsチュートリアルまとめ

Next.js React

Next.jsのチュートリアルで重要そうなとこ抜粋

ページはファイルの階層そのまま
  • pages/index.jsがルート
リンクコンポーネントでページ遷移
import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}
  • クライアント側でのナビゲーションを行う
  • javascriptを利用しての遷移
  • コード分割をNext.js側で自動的に行なってくれる
  • 最初に表示されるページのコードだけを読み込む
  • Linkコンポーネントを使用してリンクされたページのコードはバックグラウンドで自動的に読み込む
  • そのため、Linkコンポーネントを使用したページ遷移は高速
メタデータ
<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>
レイアウトコンポーネント
import styles from './layout.module.css'

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>
}

import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/layout'

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </Layout>
  )
}
グローバルスタイル
  • pages直下に _app.js ファイルを作成する
  • _app.jsはページ上のすべての要素に影響を与える
  • _app.jsのみでグローバルCSSをインポートできる
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component { ...pageProps } />;
}

Pre-renderingとは

  • 事前にHTMLを生成すること(ReactはクライアントのブラウザでソースコードからHTMLを生成する)
  • 表示が高速
  • StaticGenerationとSSRの2種類
  • ページごとに使い分けができる
  • 可能な限りStaticGenerationを使うことが推奨されている
StaticGeneration
  • 更新頻度が低いページに適している
  • 外部データがない場合、ビルド時にサーバ側でHTMLを生成する
  • getStaticPropsでデータを取得する
  • 外部API呼び出したりするときは、Node-fetchとかのパッケージ使う
SSR(Server-side Rendering)
  • 更新頻度が高いページに適している
  • クライアントがリクエストしたときにサーバ側でHTMLを生成する
  • getServerSidePropsでデータを取得する
SWRでクライアントサイドレンダリング
  • Next.jsで用意されているHook
  • データをキャッシュできる
  • リアルタイムでデータが更新される

ダイナミックルーティング

  • 外部データに基づいて、ページのPathを決める
  • ファイル名に [] を使うとDynamicRoutesになる
    • pages/posts/[id].js
  • getStaticPaths
    • pathsとfallbackを返す
    • pathsは事前ビルドするパス対象を指定する
    • fallbackは事前ビルドしたパス以外にアクセスしたときの動作
      • fallback: false => 指定パス以外（存在しないURL）なら404を返す
    • 返す値はparamsというオブジェクト型の配列
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
処理の流れ
  1. getStaticPathsでIDに基づいたどんなページを表示する可能性があるかを判断
  2. ページの中身はgetStaticPropsで取得する

nextjs.org

API
  • pages/apiフォルダ内に作る
  • apiルートのソースコードはクライアントに公開されない（ブラウザ側ファイルにバンドルされない）
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}
  • getStaticPathsとgetStaticPropsでAPIを叩かない
    • ↑はサーバサイドで実行される
    • 直接DBクエリの記述ができる