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

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

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

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

create-next-app コマンドをインストール
プロジェクトを作成する
NextJSを立ち上げてみよう

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

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

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

// インストールコマンド

// g：PC全体にインストール

npm i -g create-next-app

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

【Windows】Nodejsをインストールしよう

Reactを始めるためにNodejsをインストールして、 npmコマンドを使えるようにしなければなりません。なので、WindowsにNodejsをインストールしてみます公式HPからインストーラーをダウンロードす...

プロジェクトを作成する

（インストール手順）※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\*****>

// 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)