Zenn
🌟

【NextJS】プロジェクトを作成してみよう

2025/01/05に公開
Next.js
tech

JavaScript のフレームワークの中で最近注目されているNextJS

筆者をはじめ勉強してみたい人が多いのではないでしょうか？

そこで今回は、NextJS のプロジェクトを作成して、ブラウザからアクセスしてみます。

create-next-app コマンドをインストール

PowerShell もしくはターミナルを開いて、create-next-app コマンドをインストールします

// インストールコマンド
// g：PC全体にインストール
npm i -g create-next-app

Nodejs をインストールする必要がありますので、以下を参考にインストールしてみてください ※Windows 向け

https://hisuiblog.com/windows-nodejs-install/

プロジェクトを作成する

（インストール手順）※PowerShell で実行しています

// cdコマンドでプロジェクトを作成したいディレクトリに移動します
PS C:\Users\*****> cd 「移動先のディレクトリ」

// create-next-app 「プロジェクト名」
// でプロジェクトを作成します
// 今回は my-app という名前にします
PS C:\Users\*****> npx create-next-app my-app
√ Would you like to use TypeScript with this project? ... No / Yes // typescriptを使うか
√ Would you like to use ESLint with this project? ... No / Yes // ESLintを使うか
√ Would you like to use `src/` directory with this project? ... No / Yes // src/ ディレクトリを使うか
√ Would you like to use experimental `app/` directory with this project? ... No / Yes // app/ ディレクトリを使うか
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in C:\Users\*****\Desktop\my-app.

Using npm.

Installing dependencies:
- react
- react-dom
- next
- @next/font
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next


added 270 packages, and audited 271 packages in 25s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initializing project with template: app

Initialized a git repository.

Success! Created my-app at C:\Users\*****\Desktop\my-app
PS C:\Users\*****>

NextJS を立ち上げてみよう

// プロジェクトのフォルダ内に移動します
PS C:\Users\*****> cd my-app

// Reactを立ち上げます
PS C:\Users\*****\my-app> npm run dev

> my-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - VS Code settings.json has been created for Next.js' automatic app types, this file can be added to .gitignore if desired
event - compiled client and server successfully in 1422 ms (246 modules)

http://localhost:3000 にアクセスしてみます

↓ が表示されれば OK です！

停止させるときはPowerShell で Ctrl + C を押します

その後、 バッチ ジョブを終了しますか (Y/N)?と表示されるので、「y」を入力し Enterを押します

再度、 http://localhost:3000 にアクセスすると

↓ が表示されます

Discussion