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

2021.08.05
2024.03.24
Web
JavascriptNext.js

はじめに

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

Next.jsでアプリ作成

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

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

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

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

1.
2└── sample-app
3    ├── README.md
4    ├── next.config.js
5    ├── node_modules
6    ├── package-lock.json
7    ├── package.json
8    ├── pages
9    ├── public
10    └── styles

Typescriptでアプリ作成

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

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

サンプルからアプリ作成

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

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

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

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

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

1npx 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

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

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

参考

Support

\ この記事が役に立ったと思ったら、サポートお願いします! /

buy me a coffee
Share

Profile

author

Masa

都内のIT企業で働くエンジニア
自分が学んだことをブログでわかりやすく発信していきながらスキルアップを目指していきます!

buy me a coffee