Zenn
💫

Next.js：サンプルプロジェクト作成方法

2024/11/24に公開
Next.js
TypeScript
Vercel
Tailwind CSS
Turbopack
tech

Next.jsとは

  • React開発のためのフレームワーク
  • Vercelが提供

【公式】Next.js > Topページ
https://nextjs.org/

前提条件

  • Nodeバージョン : Node.js 18.18またはそれ以降をサポート
  • サポートOS : macOS、Windows（WSLを含む）、Linuxをサポート
  • エディター：Cursor

Next.jsのサンプルプロジェクト作成方法

npx create-next-app@latest
実行結果
PS C:\app\test> npx create-next-app@latest
Need to install the following packages:
create-next-app@15.0.3
Ok to proceed? (y) y
√ What is your project named? ... my-nextjs-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for next dev? ... No / Yes
√ Would you like to customize the import alias (@/* by default)? ... No / Yes
Creating a new Next.js app in C:\app\test\my-nextjs-app.

Using npm.

Initializing project with template: app-tw
以下省略

  • 設定に従い、PJが作成される

  • 作成したPJ配下で下記コマンドを実行し、開発サーバーを起動

my-nextjs-app> npm run dev
実行結果
PS C:\app\test\my-nextjs-app> npm run dev

> my-nextjs-app@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.0.3 (Turbopack)
   - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1218ms

開発サーバーの終了方法

  • 下記コマンドを実行し、バッチジョブを終了しますかでYを入力し、Enter
コマンド
Ctrl+C
実行結果
バッチ ジョブを終了しますか (Y/N)? Y
  • Web画面を再読み込みして下記画面が表示されれば成功

参考サイト

【公式】Next.js > Topページ
https://nextjs.org/

【公式】Next.js > プロジェクト設定方法
https://nextjs.org/docs/app/getting-started/installation

Next.jsの基本的な使い方(個人学習の備忘録)
https://qiita.com/marl0401/items/4a3f0133a4de3712ad3c

Next.jsでアプリケーション開発を始めるには。
https://qiita.com/ochiochi/items/34900c4caf2597309685

Turbopackとは何なのか調べてみる
https://zenn.dev/rem/articles/864a6fe32e666c

Discussion