Zenn
🤗

Nextjs の歩き方　（環境構築）

2024/03/29に公開
Next.js
frontend
#
beginner
tech

はじめに

この記事は、これからNextjsを利用して開発してみたいという人向けに記事を書きました。
なるべくわかりやすく書いているつもりですが、割愛してしまったり、わからなかったりすることがあれば
コメントで指摘いただけると助かります。※優しくお願いします、、

前提条件

Nodejs >=　18.17
がすでにインストール済み

nodeや、npmなどはversion がわりと新しくなりやすいのでVersion管理を行うのがおすすめです。
筆者がよく使うのはvoltaです。
ここではvoltaのインストールに関しては説明をしません。
下記Pageを参考にすれば簡単にインストールできます。

https://volta.sh/

本記事の執筆時の筆者のバージョンは下記です。

❯ volta list
⚡️ Currently active tools:

    Node: v20.12.0 (default)
    npm: v10.5.0 (default)
    Yarn: v4.1.1 (default)
    Tool binaries available:
        amplify (default)
        prettierd (default)
        nest (default)
        create-next-app (default)
        diagnostic-languageserver (default)
        lessc (default)
         (default)
        neovim-node-host (default)
        npm-check-updates, ncu (default)
        prettier (default)

See options for more detailed reports by running `volta list --help`.

念の為に各バージョンを確認してみましょう。

Nodeのバージョン

$ node -v
v20.12.0

NPMのバージョン

$ npm -v
10.5.0

各バージョンの確認もできましたので早速環境を構築して行きましょう！！

いざ環境構築

基本的には下記のコマンドを実行するだけです。
簡単ですね。

npx create-next-app@latest

実行中に様々な質問がされますが、実際に触ってみたいという方は深く考えずにエンターを連打して大丈夫です。

$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.1.4
Ok to proceed? (y)
✔ What is your project named? … my-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 to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/teramachishunsuke/develop/sandbox/next/my-app.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next

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


added 316 packages, and audited 317 packages in 19s

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

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-app at ここは作成したディレクトリのフルパスが表示されます/my-app

成功したらテスト実行してみましょう

$ cd my-app
$ npm run dev

> my-app@0.1.0 dev
> next dev

   ▲ Next.js 14.1.4
   - Local:        http://localhost:3000

 ✓ Ready in 2.1s

上記の表示になれば成功です。

http://localhost:3000 にアクセスしたら、下記の画面が表示されることでしょう。

終わりに

Node,NPMの簡単な設定から、Nextjsのサンプルプロジェクトを実行しました。
かなり簡単に、Nextjsのデモ画面が出てきたかと思います。
次回以降はこれをカスタマイズして行きたいと思います。

ご清聴ありがとうございました。

Discussion