【Next.js初めの一歩】アプリを作成する

はじめに
Next.jsでアプリ作成
1. Typescriptでアプリ作成
2. サンプルからアプリ作成
参考

はじめに

Next.jsでアプリを作成する方法を紹介します。

Next.jsでアプリ作成

手動で作成することもできますが、create-next-appを利用して自動でアプリを作成することが推奨されています。

npmでアプリを作成するには以下のようにアプリ名を指定して作成します。

npx create-next-app sample-app --use-npm

以下のようなファイルが作成されます。

.
└── sample-app
    ├── README.md
    ├── next.config.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── pages
    ├── public
    └── styles

Typescriptでアプリ作成

Typescriptでアプリを作成する場合は--typescriptオプションをつけます。

npx create-next-app sample-app-ts --use-npm --typescript

サンプルからアプリ作成

サンプルからアプリを作成する場合は、--exampleオプションでNext.jsの公式リポジトリやGithubのリポジトリを指定します。

公式のサンプルを指定する場合は以下のようにします。

next.js/examples/blog at canary · vercel/next.js

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

npx create-next-app sample-app-blog --use-npm --example https://github.com/vercel/next.js/tree/canary/examples/blog

公式のサンプルは下記になります。

next.js/examples at canary · vercel/next.js

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

はじめに

Next.jsでアプリ作成

Typescriptでアプリ作成

サンプルからアプリ作成

参考