Zenn
🌐

Next.jsの公式ドキュメントを、ChatGPTで翻訳 + 要約しながらさっくり読んでみる(Getting Started編)

2023/07/31に公開
Next.js
React
ChatGPT
tech

少し前にtwitterでこのようなtweetを見ました。
https://twitter.com/igz0/status/1682602522199064577?s=61&t=Cq3TUbELvN1nxXgcDeSv0A

確かに、自分はあんまり公式ドキュメントを読んでいないなと反省しました。
そこで今のプロジェクトで使用している、かつ人気のあるフレームワークNext.jsの公式ドキュメントを読んでみようと思います。

しかし、私があまり読まない理由として、

  • 英語であること
  • 膨大な量に圧倒され、困った時に読めば良いのではと思ってしまう
    があります。
    これを解決するために、ChatGPTを活用して、翻訳 + 要約してさっくりと読んでみます。
    この記事は、その内容をアウトプットした記事になります。

今回はGetting Startedの項目をさっくり読んでみます。

ドキュメントの内容は2023/07/30時点の内容です。
また、今回はApp RouterではなくPages Routerの内容を要約します。
App Routerについては別タイミングで読んでみます。

Introduction

翻訳ページ
https://nextjs.org/docs

要約内容

  • Next.jsドキュメンテーションへようこそ！
  • Next.jsはWebアプリケーションを構築するためのフレームワークです。
  • Reactコンポーネントを使ってユーザーインターフェースを構築できます。
  • Next.jsはアプリケーションのための追加の構造、機能、最適化も提供します。
  • Next.jsは自動的に設定を行い、ビルドやコンパイルなどのツールを設定する手間を省きます。
  • 個人の開発者から大規模なチームまで、インタラクティブで動的、高速なWebアプリケーションを構築するのにNext.jsが役立ちます。
  • 主なNext.jsの特徴には次のようなものがあります：
    • ルーティング：ファイルシステムベースのルーターで、レイアウト、ネストしたルーティング、ローディング状態、エラーハンドリングなどをサポートします。
    • クライアントサイドおよびサーバーサイドのレンダリング：クライアントおよびサーバーコンポーネントでのレンダリングが可能で、Next.jsではStaticおよびDynamic Renderingもサポートしています。
    • データフェッチ：Reactコンポーネント内でのasync/awaitサポートを持つデータフェッチが簡素化されており、fetch()s APIを用いたデータの取得が可能です。
    • スタイリング：CSS Modules、Tailwind CSS、CSS-in-JSなど、好みのスタイリング方法をサポートしています。
    • 最適化：イメージ、フォント、スクリプトの最適化により、アプリケーションのCore Web Vitalsとユーザーエクスペリエンスを向上させます。
    • TypeScript：TypeScriptのサポートが向上し、より効率的なコンパイルやカスタムTypeScriptプラグイン、タイプチェッカーを提供しています。
    • APIリファレンス：Next.js全体でAPIデザインが更新されており、新しいAPIについてはAPIリファレンスセクションを参照してください。
  • ドキュメントのセクションとページは基本的な内容から高度な内容まで順序立てて組織されています。しかし、好きな順番で読むこともできますし、自分のユースケースに合わせて必要なページに飛ぶこともできます。
  • トップのサイドバーには、App RouterとPages Routerの機能を切り替えることができるドロップダウンメニューがあります。各ディレクトリに固有の機能があるため、選択されているタブを把握することが重要です。
  • ページの右側には目次があり、ページ内のセクション間を簡単にナビゲートできます。
  • パンくずリストはページの上部にあり、App RouterドキュメントとPages Routerドキュメントを表示しているかどうかを示しています。
  • 始めるには、インストールの手順を確認してください。ReactやServer Componentsについて初心者の場合は、React Essentialsページを読むことをお勧めします。
  • ドキュメントは初心者にも分かりやすく設計されていますが、Next.jsの機能に焦点を当てるためにはある程度のHTML、CSS、Reactの基本的な理解が必要です。新しい概念を紹介する際には関連するドキュメントへのリンクも提供されます。
  • スクリーンリーダーを使用してドキュメントを読む場合は、FirefoxとNVDA、またはSafariとVoiceOverの組み合わせが最適なアクセシビリティを提供します。
  • Next.jsに関する質問は、GitHub Discussions、Discord、Twitter、Redditのコミュニティに常に歓迎されています。
アウトプット

この部分についてはあんまり学びはないが、
スクリーンリーダーを使う時にはFirefoxやSafariを推奨しているのには初耳(何ででしょう)

Installation

翻訳ページ
https://nextjs.org/docs/getting-started/installation

要約内容

  • システム要件

    • Node.js 16.8 以降が必要。
    • macOS、Windows（WSLを含む）、Linux に対応。

  • 自動インストール

    • create-next-app を使って新しい Next.js アプリを作成することを推奨。
    • インストール時にいくつかのプロンプトが表示される。
      • プロジェクト名の入力。
      • TypeScript の使用の有無（Yes/No）。
      • ESLint の使用の有無（Yes/No）。
      • Tailwind CSS の使用の有無（Yes/No）。
      • 'src/' ディレクトリの使用の有無（Yes/No）。
      • App Router の使用の有無（Yes/No）。
      • デフォルトの import alias のカスタマイズの有無（Yes/No）。

  • 手動インストール

    • 必要なパッケージをインストール。
      • npm install next@latest react@latest react-dom@latest
    • package.json に以下のスクリプトを追加。
      • dev 開発モードで Next.js を起動。
      • build アプリケーションを本番用にビルド。
      • start Next.js の本番サーバーを起動。
      • lint Next.js の組み込みESLint設定をセットアップ。

  • ディレクトリの作成

    • Next.js はファイルシステムルーティングを使用し、ファイルの構造がアプリケーションのルートを決定する。
    • app/ ディレクトリを作成し、App Router を使用することを推奨。
    • app/layout.tsx ファイルに必要な <html> と <body> タグを記述する。
    • app/page.tsx ファイルに初期コンテンツを記述する（ルートURLにアクセスしたときに表示される）。

  • ページディレクトリ (オプション)

    • App Router ではなく、Pages Router を使用したい場合は、pages/ ディレクトリを作成し、index.tsx ファイルを追加する。
    • pages/ に _app.tsx ファイルを追加してグローバルレイアウトを定義する。
    • pages/ に _document.tsx ファイルを追加してサーバーからの初期応答を制御する。

  • public フォルダ (オプション)

    • public フォルダを作成して画像やフォントなどの静的アセットを保存できる。
    • public ディレクトリ内のファイルはベースURL（/）から参照可能。

  • 開発サーバーの実行

    • npm run dev を実行して開発サーバーを起動。
    • http://localhost3000 でアプリケーションを確認できる。
    • app/layout.tsx（またはpages/index.tsx）を編集し、保存するとブラウザで更新結果を見ることができる。

  • 注意事項

    • プロジェクトで両方のルーターを使用できるが、app 内のルートが優先される。
    • 新しいプロジェクトでは1つのルーターのみを使用することを推奨。混乱を避けるため。
アウトプット

どのフレームワークでもだが、Nodeのバージョン注意。

プロジェクトで両方のルーターを使用できるが、app 内のルートが優先される。

とのことから、新規プロジェクトでNext.jsを導入する際には、App routerを採用した方が良いかも

_document.tsx ファイルを追加してサーバーからの初期応答を制御する。
Headタグなど全ページに適用させたい内容を書けば良さそう？
あまり使うイメージないので、どのような時に使うか調査

Next.js Project Structure

  • Next.jsプロジェクトのファイルとフォルダー構造の概要が提供されている。
  • トップレベルのファイルとフォルダー、設定ファイル、そしてappとpagesディレクトリ内のルーティング規則について説明されている。
  • トップレベルのファイルには、Next.jsの設定ファイル（next.config.js）、ミドルウェア（middleware.ts）、OpenTelemetryとInstrumentation（instrumentation.ts）、環境変数関連のファイル（env、env.local、env.production、env.development）、TypeScriptの宣言ファイル（next-env.d.ts）、プロジェクトの依存関係やスクリプト（package.json）、Gitの設定ファイル（.gitignore）などが含まれる。
  • トップレベルのフォルダーには、app（アプリケーションのルーティング）、pages（ページのルーティング）、public（静的ファイルの格納）、src（オプションのアプリケーションのソース）などがある。
  • ルーティングコンベンションには、layout.js（ページのレイアウト設定）、page.js（ページのコンテンツ）、loading.js（ローディングUI）、not-found.js（404エラーUI）、error.js（エラーUI）、global-error.js（グローバルエラーUI）、route.js（APIエンドポイント設定）などが含まれる。
  • ネストされたルート、ダイナミックルート、キャッチオールセグメント、ルートグループなどの特定のフォルダーとファイルの命名規則も説明されている。
  • メタデータファイルの命名規則には、favicon.ico（Faviconファイル）、icon.js（生成されたアプリアイコン）、apple-icon.js（生成されたAppleアプリアイコン）、opengraph-image.js（生成されたOpen Graph画像）、twitter-image.js（生成されたTwitter画像）、sitemap.js（生成されたサイトマップ）、robots.js（生成されたRobotsファイル）などが含まれる。
  • 特定のフォルダーとファイルの命名規則には、_app.js（カスタムApp）、_document.js（カスタムDocument）、_error.js（カスタムエラーページ）、404.js（404エラーページ）、500.js（500エラーページ）などがある。
アウトプット

opengraph-image.js, twitter-image.js, sitemap.jsあたりは初めて知った。 https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#twitter-image
少しだけ見てみると、Twitter向けのOGP設定が簡単 + 適切な設定でできる感じ
Metaデータなどを自分で作成せずに済むかも(要調査)

React Essentials

翻訳ページ
https://nextjs.org/docs/getting-started/react-essentials

  • Next.jsでアプリケーションを構築する際には、Reactの新しい機能であるServer Componentsについて理解すると役立ちます。
  • Server ComponentsとClient Componentsの違いについて、使用するタイミング、および推奨されるパターンについて説明しています。
  • Server ComponentsとClient Componentsは、サーバーとクライアントの両方を横断するアプリケーションを構築することができます。クライアント側のインタラクティビティと、伝統的なサーバーのレンダリングによるパフォーマンスの向上を組み合わせることができます。
  • Server Componentsはサーバー側でレンダリングされ、データ取得などをサーバー側で行うことでクライアント側のJavaScriptバンドルサイズを削減し、初回ページロードのパフォーマンスを向上させることができます。
  • Client Componentsはクライアント側のインタラクティビティを追加することができます。Next.jsではクライアント側でレンダリングされ、サーバー側でも事前レンダリングされることがあります。
  • "use client"ディレクティブを使用することで、Server ComponentsとClient Componentsの区別を行います。"use client"ディレクティブがあるファイル内では、それ以降のモジュールがクライアントバンドルに含まれます。
  • Server ComponentsとClient Componentsを組み合わせて同じコンポーネントツリーに配置することができます。Reactはサーバー側とクライアント側の両方でレンダリングを行います。
  • サードパーティのライブラリは"use client"ディレクティブを含めることでServer Components内でも動作しますが、含まれていない場合はClient Components内でのみ動作します。
  • サーバー側のみで動作するコードをクライアント側のコンポーネントに誤ってインポートしないようにするために、"server-only"パッケージを使用できます。
  • Server ComponentsではReactのContextを直接作成または使用することはできませんが、Client Components内では完全にサポートされています。サーバー側のコンポーネント間でデータを共有するためには、通常のJavaScriptのグローバルシングルトンパターンを使用できます。
アウトプット

前提として、CSRとSSRの違いは確実に理解

その上でuse clientやserver-onlyの使い方は知っておきたい(適切な使い方をする)
公式ページにもあるが、clickなどのイベントやuseStateなどで

下記公式ページより引用

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

引用元
https://nextjs.org/docs/getting-started/react-essentials#client-components

Discussion