🐥

[学習用の環境構築] 作って学ぶ Next.js/React Webサイト構築

2024/08/07に公開

JavaScript

Next.js

React

tech

書籍

2022年7月発売。若干古いためバージョンに気を付けながら環境構築を進めた。

環境

Ubuntu 24.04

構築

注意点

バージョンについて

本書にはnode, next, reactのバージョン記載がなかったように見える。GitHubにあるpackage.jsonを見る限り、nextはv12, reactはv18を使用しているみたい。

（2024年8月現在、最新はnextはv15, reactはv18）

nodeのバージョンは（どこを見たら良いのか分からないので）不明。nodeのリリース日と本書の発売日を比較するとv20ではなさそう。v18を使用する。（2024年8月現在、最新はv22）

インストール

$ volta install node@18
# nodeをinstallすれば npx が使える
$ npx create-next-app@12 blog
$ cd blog/
# そのままだとpackage.jsonにnext v14を使うようになっているためv12を使うように設定
$ npm install next@12 eslint-config-next@12

package.json

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^12.3.4",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "devDependencies": {
    "eslint": "8.57.0",
    "eslint-config-next": "^12.3.4"
  }
}

補足。

node v16でnpxしたときの警告

$ npx create-next-app@12 blog
Need to install the following packages:
  create-next-app@12.3.4
Ok to proceed? (y) y
Creating a new Next.js app in /root/study/next-react-website/blog.

Using npm.

Installing dependencies:
- react
- react-dom
- next

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'next@14.2.5',
npm WARN EBADENGINE   required: { node: '>=18.17.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }

~~~ 省略 ~~~

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'next@14.2.5',
npm WARN EBADENGINE   required: { node: '>=18.17.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

~~~ 省略 ~~~

Success! Created blog at /root/study/next-react-website/blog

A new version of `create-next-app` is available!
You can update by running: npm install --global create-next-app

書籍

環境

構築

注意点

バージョンについて

インストール

Discussion