Open9

Next.js Tutorial

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

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

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

run -> npm run dev

パッケージ/ファイル名.jsで、ルーティングされる

Link Component
  • aタグをラップしている
import Link from 'next/link'

Client-Side Navigation

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

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

Assets, Metadata, and CSS

Image

(画像最適化)

Head

(headタグコンポーネント)

style jsx

https://github.com/vercel/styled-jsx
(CSSをスコープしてくれるCSS in JS)

[Pre-rendering and Data Fetching]

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

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

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

Static Generation with Data using getStaticProps

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

ログインするとコメントできます