技術とかの雑なToday I Learnedメモ

Next.jsのアンダースコアで始まるファイル

Next.jsのアンダースコアで始まるファイル

Next.jsのpagesディレクトリにあるアンダースコアから始まるファイルについてメモ。

_document.js / document.tsx

入門者は基礎からしっかり理解Next.jsの基本(React) | アールエフェクト

Next.jsではindex.jsファイルにheadタグ、bodyタグ、scriptタグなどを記述しなくても自動で設定されています。_document.jsファイルを利用することでheadタグ、bodyタグなど全ページに共通する設定をカスタマイズすることができるようになります。

コンポーネントだけを書いていても問題なく動くのはNext.jsが裏側でhtmlタグやbodyタグなどをいい感じに初期設定してくれているからであり、それらのタグをカスタマイズできるのが_document.(js|tsx)ということになる。

ここをカスタマイズすることですべてのページでここの設定が適用される。

_app.js / _app.tsx

Next.jsの_documment.js(tsx)と_app.js(tsx)について爆速で理解しよう

Next.jsではAppコンポーネントを使用して全てのページを初期化するようになっています。 そのため、このコンポーネントを継承したクラスがあるファイル、_app.js(tsx) を作成することでデフォルトのAppコンポーネントを上書きできます。 つまり、 全ページで必要な処理をここに書くことができます。

_document.(js|tsx)はすべてのページで使われるHTMLタグの配置などのカスタマイズだったけど、_app.(js|tsx)ではすべてのページで実行したい処理を書く。

この記事ではページ間の共通レイアウトや共通のstate、グローバルなCSS、RouteコンポーネントのラップやReduxのProviderの設定などができる。

_middleware.js / _middleware.ts

【Middleware使用】Next.js12でBasic認証を導入(ローカル,vercel 両対応) | tech-broccoli.life

リクエスト完了前に実行したい処理を実行してくれる。6/14にも書いたんだけど、「pagesのディレクトリ以下に配置するとそのページだけそのmiddlewareが実行される」というのを知らなかった。便利だ。

他にあるのかな

pagesディレクトリのアンダースコアから始まるファイルで特別なファイル名(Next.js側で特別な処理をする)は他にあるのか気になった。

ググって調べるのも難しそうなのでNext.jsのリポジトリをforkして手元に持ってきてVS Codeでgrepしてみた。

_appとか_middlewareとかでgrepすると色々なファイルが出てくるんだけど、ビルド時の処理であることから

next.js/entries.ts at canary · vercel/next.js

ここで書いてあるファイルが一応全部なのかな(深追いはしてないので全然違うこともあるかも)

_errorもあるな。