🚀

【Next.js和訳】API Reference/Create Next App

2 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、API Reference/Create Next Appの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Create Next App

Next.js を使い始めるには、create-next-app を使うのが一番簡単です。この CLI ツールを使うと、すべてが設定された状態で、新しい Next.js アプリケーションの構築をすばやく開始することができます。新しいアプリは、Next.js のデフォルトのテンプレートを使って作成することも、公式の Next.js のサンプルを使って作成することもできます。まずは、以下のコマンドを使用してください。

npx create-next-app
# or
yarn create next-app

--ts-typescript フラグを使用して TypeScript プロジェクトを作成できます。

npx create-next-app --ts
# or
yarn create next-app --typescript

オプション

create-next-app には以下のオプションがあります。

  • --ts, --typescript - TypeScript プロジェクトとして初期化します。
  • -e, --example [name]|[github-url] - アプリを起動するための例です。Next.js のリポジトリに登録されているサンプル名、または GitHub の URL を使用できます。URL には、任意のブランチやサブディレクトリを使用できます。
  • --example-path [path-to-example] - まれに、GitHub の URL にスラッシュ付きのブランチ名(例:bug/fix-1)とサンプルへのパス(例:foo/bar)が含まれている場合があります。この場合は、サンプルへのパスを別途指定する必要があります。--example-path foo/bar
  • --use-npm - npm を使ってアプリをブートストラップするように CLI に明示的に指示します。yarn を使ってブートストラップを行うには、yarn create next-app を実行することをお勧めします。

なぜ Create Next App を使うの?

create-next-app は、新しい Next.js のアプリを数秒で作成することができます。Next.js のクリエーターによって公式にメンテナンスされており、さまざまなメリットがあります。

  • インタラクティブな体験: npx create-next-app を実行すると(引数なしで)、プロジェクトのセットアップをガイドするインタラクティブなエクスペリエンスが起動します。
  • 依存性がない: プロジェクトの初期化はわずか 1 秒で完了します。Create Next App には依存関係がありません。
  • オフラインサポート: Create Next App は、オフラインであるかどうかを自動的に検出し、ローカルのパッケージキャッシュを使用してプロジェクトをブートストラップします。
  • サンプルのサポート: Create Next App は、Next.js の examples コレクションにあるサンプルを使用してアプリケーションをブートストラップします(例:npx create-next-app --example api-routes)。
  • テスト済み: このパッケージは Next.js monorepo の一部であり、Next.js 自体と同じ統合テストスイートを使用してテストされているため、リリースごとに期待通りの動作が保証されます。

関連

次に行うことの詳細については、次のセクションをお勧めします。

https://nextjs.org/docs/basic-features/pages

https://nextjs.org/docs/basic-features/built-in-css-support

https://nextjs.org/docs/api-reference/cli

Discussion

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