Next.js 触ってみる

React ベースの Next.js の触りだけ。

CLI が充実してきて、以下のように npx でプロジェクトを作れる。デフォルトで聞かれるのはプロジェクト名だけ。

$ npx create-next-app neos-next-app

Creating a new Next.js app in /home/neo/neos-next-app.

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

Initialized a git repository.

Success! Created neos-next-app at /home/neo/neos-next-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd neos-next-app
  npm run dev

通常は、テンプレートとなる GitHub リポジトリを指定して作るモノらしい。Gatsby.js もそういう感じだったね。

どんなファイルが作られたか見てみる。

$ tree -a -I '\.git|node_modules' ./neos-next-app/

./neos-next-app/
├── .gitignore
├── .next
│   └── cache
│       └── next-babel-loader
├── README.md
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css

いかにも React らしい構成。

package.json もシンプルだ。

{
  "name": "neos-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.3",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

pages/api/ ディレクトリが特徴的。Next.js は Vercel が作っているので、そのまんま Vercel にデプロイした時に Vercel の Serverless Functions が使えるように考慮されている。

ソースディレクトリには、HTML ファイルが1つもない。SSR や SSG も実現できるので、普通の SPA みたく index.html さえあれば良いワケじゃないからなのだろう。

ザッと見ただけでも、Vercel 味が強いというか、CoC 感というか。「どうしてこのコードでそういう動きをするの？」という隠蔽された部分が多く、個人的には苦手。React 自体が Web サイトや Web アプリを作るためのフレームワークというより、DOM 操作のライブラリに徹しているところもあり、Next.js もスタイリングや UI にはあまり口出ししてこない印象。Vue や Angular と比べて動作は高速なのかもしれないが、サッと何かを作りたい時に学習コストが高いかなーと思う。