モチベーション

毎週木曜日Slackのkey_frontチャンネルでハドル機能を使いお題に対してメンバー同士ディスカッションをする時間を15〜30分程度設けている
今回はNext.js App Routerについて取り上げる
ファシリテーターは筆者なので、事前に読み込んで気になった点などをスクラップに投げていく
開催日は○○/○○（木）で最終的に議事録として結論をまとめる

過去に開催した関連してそうな内容

環境構築

$ npx create-next-app@latest

https://nextjs.org/

$ volta pin node@18.17.0 # nodeのバーションが古かったのでvoltaでピン留めする
$ npm install
$ npm run dev

もしVoltaを入れていない場合は以下から導入してみる

1zushun 2ヶ月前に更新

ディレクトリ構成を整える

チームで検討、必要なければ個人の好みで整える。

tsconfig.jsonの設定

tsconfig.jsonはstrictestを導入して硬めに行く。ついでにエイリアスも設定しておく。

リンター周りの設定

最近はeslint-config-next（Next.jsのルールセット）でも十分だと思ってきているのでESLintの設定はデフォルトのままにする。Stylelint・Prettierは一旦流す。コミット品質担保（Husky + Lint-staged）は設定しておく。

CSS周りの設定をする

CSS Modulesで進める。必要であればSassを入れる。Tailwind CSSをいれないのでリセットCSSの用意も別途する（制作チームのおすすめは以下に添付）

VSCodeの設定をしておく

以下はextenstions.jsonの記事になるが、settings.jsonも設定する。

settings.jsonがなんか変わっていたのでメモ

Storybookの準備をする

エイリアスの追加を設定しておく

import type { StorybookConfig } from "@storybook/nextjs";
const path = require("path");

const config: StorybookConfig = {
  stories: ["../app/**/*.mdx", "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  // @see https://github.com/storybookjs/storybook/issues/3916#issuecomment-871283551
  webpackFinal(config: any) {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "../app"),
    };
    return config;
  },
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

bundle-analyzerを導入する

ドキュメントに案内があった、こっちの案内に従ってみる

全部実装して最後にコミットできればok

1zushun 2ヶ月前に更新

Vercel

ホスティングはVercelを選択した。

本番環境が遅い

開発環境ではprefetchがなし（以下参照・実際に確認済み）である程度早く処理されていたのに逆にprefetchされる本番環境では異様に遅い

Prefetching happens when a <Link /> component enters the user's viewport (initially or through scroll). Next.js prefetches and loads the linked route (denoted by the href) and its data in the background to improve the performance of client-side navigations. Prefetching is only enabled in production.

ネットワークタブを見るとcontent downloadにかなり持って行かれている
bundle-analyzerで確認してみたがバンドルサイズに問題はなさそう
開発環境でnpm run build && npm run startを実行しprefetchできる環境で試してみた。これは期待値の速さになっていた

→ 恐らくVercel周りの設定で何かやらかしているはず

上記の理由からVercel周りで調査を進めて、以下の記事を見つけた。本番環境が異様に遅い原因はVercelのリージョンがワシントンDCになっていたからだった。東京リージョンに修正して完了。
リージョンが違うだけでここまでパフォーマンスに影響が出るのかと知った

ドキュメントを見たらServerless FunctionはデフォルトでワシントンDCとして設定されるとのこと

By default, Serverless Functions execute in Washington, D.C., USA (iad1) for all new projects to ensure they are located close to most external data sources

Vercel Functionsの詳細

何も設定していないとVercel Functions・API Routes・Server Rendering・ISRの向きがワシントンDCになるのか

https://vercel.com/docs/functions

Speed Insights・Web Analyticsの導入

Vercelをいじっていく中でVercel謹製のSpeed InsightsとWeb Analyticsがあることを知った
どのプランでも使うことができる、詳細は下記記事から確認する
極端な話、VercelのダッシュボードからWeb Vitalsの確認もウォッチできるからlighthouse使う必要がなくなるのかな。一旦運用してみてる。

https://vercel.com/docs/speed-insights

https://vercel.com/docs/analytics

1zushun 2ヶ月前

react-testing-library

現状ではサバコンとreact-testing-libraryを組み合わせたテストにはかなり制限があるようなのでクラコンがメインになるのか。

以下はReact + Viteの時のセットアップ等だったのでNext.jsで組み込む時に変更があればメモしていく

1zushun 2ヶ月前

Next.jsのtesting-libraryのドキュメント

以下に沿って進める

ドキュメントにインストールするパッケージの案内がある。
@testing-library/user-event追加した方が良いかも

RTL

$ npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

jest・ts-jest・@types/jestがインストールされる

Jest

$ npm init jest@latest

RTLのルールセットを入れる。
testing-library/prefer-user-eventを有効にしてfireEventを使わないようにする

ESLint

$ npm install -D eslint-plugin-testing-library

以前まとめたRTLの記事との差分はjest.config.tsの部分だけだった