Zenn
Open9

Next.js Tutorial

Next.js
tsutoutsutou

https://nextjs.org/learn/basics/create-nextjs-app

Next.jsは最高の「Developer Experience」と多くの組み込み機能を持っています。

  • 直感的なページベースのルーティングシステム（dynamic routesをサポート)
  • プリレンダリングでは、スタティック生成（SSG）とサーバーサイドレンダリング（SSR）の両方がページ単位でサポートされています。
  • ページ読み込みを高速化するための自動コード分割
  • 最適化されたプリフェッチによるクライアントサイドルーティング
  • 組み込みの CSS と Sass のサポート、および任意の CSS-in-JS ライブラリのサポート
  • 高速リフレッシュ対応の開発環境
  • サーバーレス関数でAPIエンドポイントを構築するためのAPIルート
  • 完全に拡張可能
tsutoutsutou
Link Component
  • aタグをラップしている
import Link from 'next/link'

Client-Side Navigation

  • JavaScriptを使用してページ遷移を行うことを意味し、ブラウザが行うデフォルトのナビゲーションよりも高速。

注意: Next.jsアプリ外の外部ページへのリンクが必要な場合は、Linkを使用せずに<a>タグを使用すること

tsutoutsutou

[Pre-rendering and Data Fetching]

Next.jsはすべてのページをプリレンダリングする(各ページのHTMLを事前に生成する)
-> パフォーマンスとSEOを向上

静的生成(Static Generation)
  • ビルド時にHTMLを生成するプリレンダリング方式。各リクエストで再利用される。
  • 情報が頻繁に変わらないページを高パフォーマンスで表示できる

サーバーサイドレンダリング
  • リクエストごとにHTMLを生成するプリレンダリング方式。
  • 静的生成よりは遅いが、常に情報は最新になる

tsutoutsutou

Static Generation with Data using getStaticProps

propsとして静的生成の前にgetStaticPropsを通してデータを渡せる