🙌

Next.jsと周辺のライブラリについて

2021/10/11に公開

Next.js

tech

概要

https://nextjs.org/
The React Framework for Production

pages配下にファイルを作るだけでroutingができる
SSGができる
Vercelに簡単にデプロイできる

vs Nuxt トレンド
https://www.npmtrends.com/next-vs-nuxt

VueのフレームワークであるNuxtとの比較だと、圧倒的という感じでもないですが、ここのところ利用事例は増えているように見えます。

Zenn, NotionあたりもNextぽいです。

開発

yarn create next-app
yarn dev

ローカルサーバが立ち上がって、変更を監視してくれている。

/companies/11/worksのようなルーティングを実現したい場合
pages/companies/[cid]/works/index.jsx
というフォルダ構造で実現ができる。

ライブラリについて

package.json

  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/material": "^5.0.0",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hook-form": "^7.17.2",
    "swr": "^1.0.1"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2"
  }

emotion
コンポーネントにスタイルを当てるためのもの

material-ui
今回バージョンアップしてjob.j-sen.jpに入っているものとは少し記述が変わっている。

react-hook-form
日本語ドキュメントが多く
レンダリングも最低限
Yup連携可能

swr
データを取得するためのライブラリ
キャッシュしてくれたり、簡単高機能、Nextを作っているvercel製。

概要

開発

ライブラリについて

Discussion