Next.jsプロジェクトを作成する手順

Next.jsプロジェクト作成方法

Node.jsのインストール

Next.jsはReactのフレームワークです。まずReachの実行環境を整えるためにNode.jsをインストールします。

https://choppydays.com/xserver%e3%81%abnode-js%e3%82%92%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%99%e3%82%8b/

Next.jsプロジェクト作成

Next.jsのプロジェクトは npxコマンド または yarn コマンドで作成します。

npx create-next-app
# or
yarn create next-app

実行でプロジェクト名を入力し、完了します。

$  yarn create next-app 
yarn create v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@10.0.6" with binaries:
      - create-next-app
✔ What is your project named? …  [ PROJECT_NAME  ]
Creating a new Next.js app in /home/user/projects/PROJECT_NAME/ .

Installing react, react-dom, and next using yarn...

yarn add v1.22.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.1: The platform "linux" is incompatible with this module.
info "fsevents@2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 236 new dependencies.

Next.jsの実行

プロジェクトディレクトリで下記コマンドの実行でプロセスを起動し、ブラウザからのアクセスを実現します。

$ yarn run dev
yarn run v1.22.5
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully

下記アドレスからアクセスが可能になります。

https://localhost:3000

Next.jsプロジェクト作成方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA