はじめに

Next.js のドキュメントへようこそ！

Next.js を初めて使用する場合は、学習コースから始めることをお勧めします。

学習コースは翻訳されていません。

インタラクティブなクイズによる学習コースでは、Next.js を使うために必要なすべての知識を習得できます。

Next.js に関連事項する質問がある場合は、GitHub Discussions のコミュニティーでなんでも質問してください。

自動セットアップ

すべてを自動的にセットアップする create-next-app を使って、Next.js アプリを作成することをお勧めします。プロジェクトを作成するために、次を実行します:

npx create-next-app@latest
# または
yarn create next-app

TypeScript のプロジェクトで始めたい場合、 --typescript フラグを使うことができます:

npx create-next-app@latest --typescript
# または 
yarn create next-app --typescript

インストールの完了後:

create-next-app の使い方のより詳しい情報は、create-next-app ドキュメントで確認できます。

あなたのプロジェクトに、next,reactそして react-dom をインストールしてください。

npm install next react react-dom
# または
yarn add next react react-dom

package.jsonを開いて、scriptsに追加してください:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

これらのスクリプトは、アプリケーション開発のさまざまな段階に当てはまります:

Next.js は pages の概念を中心に構築されます。pageとは pages ディレクトリの .js 、.jsx、.ts、または .tsx ファイルからエクスポートされたReact コンポーネントです。

ページはファイル名に基づいて、ルーティングに紐づけられます。例えば、pages/about.jsは /about にマップされます。ファイル名によって動的パラメータを追加できます。

プロジェクトの pages ディレクトリの中に作成してください。

./pages/index.jsの中に次の内容を記載します:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

これまでのところ:

さらに、すべての Next.js アプリケーションは最初から本番環境で使用できます。詳細は、デプロイメントのドキュメントをご覧ください。