Zenn
Closed14

Next.js学習ログ

Next.js
React
ryo_kawamataryo_kawamata

冬休みでNext.jsを勉強したいなーと思ったので、学習ログをスクラップにまとめていきます。

やりたいこと

https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website
https://react2025.com/

他何かおすすめの資料あればコメントもらえると嬉しいです。

自分のスキルレベル

  • はるか昔にReactのチュートリアルをちょっとやった。普段はVueを書く。
  • Next.js 初めて
ryo_kawamataryo_kawamata

https://nextjs.org/learn/basics/data-fetching/pre-rendering

pre-renderingの話。
Next.jsはデフォルトでプリレンダリングするので、JSなしでも動く。
JSが読み込まれた後でインタラクテイィブな操作が可能になる。

pre-rendaeringには2つの方法がある

  1. Static Generation（SSG）
  2. Server-side Rendering（SSR）

SSGはビルド時にHTMLを生成する。SSRはリクエスト毎にHTMLを生成する。

Next.jsはページ別にレンダリング方式を選択できる（スゴイ）
あるページではSSG、あるページではSSRみたいなことができる。

SSRより遥かにスピードが早いSSGを使うことがおすすめ。
ページの内容がリクエストのたびに変更する必要がある場合は、SSR。またはSPA。

ryo_kawamataryo_kawamata

外部データを必要としないページはプロダクションビルド時に自動的にSSGになる。

外部データを必要とするページは、外部データをfetchした後にビルドされる。

SSGでのデータ取得はgetStaticPropsによって行われる。

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

（developmentモードではgetStaticPropsも、リクエストのたびに実行される）

ryo_kawamataryo_kawamata

getStaticPropsはserver-sideで実行されることが決まっているので、DBにアクセスすることもできる。

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

このコードはブラウザ用のJSビルドにはバンドルされない。
getStaticPropsはpageでのみ実行可能。ページ以外のファイルでは使えない。

ryo_kawamataryo_kawamata

リクエスト時にビルドするのがSSR

SSRでは、getServerSideProps がリクエスト時にサーバー側で実行される。
引数に受け取るcontextでリクエスト時の値を受け取ることもできる。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

getServerSidePrpsはリクエスト時にデータを取得しなくてはならないページにだけ使うべき。リクエスト毎にデータにアクセスするため、CDNに載せることは出来ず速度が遅い。

ryo_kawamataryo_kawamata

Client-side Rendering

pre-renderがいらない場合は、静的にページをビルドし、ページがビルドされた後に、JSで外部データを読み込む方式が良い。

管理画面とかにおすすめ

ryo_kawamataryo_kawamata

動的なSSGページ作成の方法

Dynamic Routesを使う。

import Layout from '../../components/layout'

export default function Post() {
  return <Layout>...</Layout>
}

export async function getStaticPaths() {
  // Return a list of possible value for id
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

ryo_kawamataryo_kawamata

API Route

https://nextjs.org/learn/basics/api-routes/api-routes-details

Do Not Fetch an API Route from getStaticProps or getStaticPaths
You should not fetch an API Route from getStaticProps or getStaticPaths. Instead, write your server-side code directly in getStaticProps or getStaticPaths (or call a helper function).

Here’s why: getStaticProps and getStaticPaths runs only on the server-side. It will never be run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers.

API Route を getStaticProps や getStaticPaths からは取得できない。
なるほど〜。

ryo_kawamataryo_kawamata

Next.jsの公式チュートリアル 一通り読み終わった。

  • pre-rendering and Data Fetching
  • Dynamic Routes
  • API Routes

が勉強になった。

このスクラップは2021/02/04にクローズされました