🛡️
設定0行でNext.js 13のLayoutページURLを型安全に取得できる最強ライブラリ「pathpida」
pathpidaがNext.js 13のLayout(appDir)に対応
この記事を公開してからそろそろ2年が経ちます。
GitHubスター数429、npmの月間DL数は7万近くまで成長し同時期にリリースされた競合ライブラリを大きく引き離しています。
私自身は現状のpathpidaを不満なく使っているのですが、来年あたりNext.js 13を使うことになりそうなので新機能を追加しました。
Next.js 13の新機能LayoutのページURLも生成するように/pagesと/appの両方を監視するアップデートを行ったので解説します。
使い方
今までと変わらず設定なしで動作します。Layout対応しているプロジェクトはnext.config.jsに
next.config.js
module.exports = {
experimental: { appDir: true },
}
と書かれているはずなのでこれを頼りにpathpidaは既存の/pagesに加えて/appの監視も同時に行います。
細かい機能対応
/app配下では、ディレクトリ名を (name) で囲むとそれ自体はURLに含まれないグループを作れるようです。pathpidaもこのディレクトリを無視するようにしています。
また、/pagesと/appは両方使えるようなので型定義を統合するようにしました。
もちろん片方だけでも使えます。
バグ報告
私の手元のNext.js 13ではCSS in JS周りの設定が上手く出来なくてpathpidaの検証まで出来ていません。どなたか使ってみてバグに気付いたらGitHubのIssueにお知らせください。
次はTypeScriptフルスタックフレームワークfrourioの更新情報を書く予定です。
Twitterをフォローしてお待ちください。
Discussion