🛡️

設定0行でNext.js 13のLayoutページURLを型安全に取得できる最強ライブラリ「pathpida」

2022/11/22に公開

pathpidaがNext.js 13のLayout(appDir)に対応

https://zenn.dev/solufa/articles/renewed-pathpida
この記事を公開してからそろそろ2年が経ちます。

GitHubスター数429、npmの月間DL数は7万近くまで成長し同時期にリリースされた競合ライブラリを大きく引き離しています。

pathpida GitHub star history

私自身は現状のpathpidaを不満なく使っているのですが、来年あたりNext.js 13を使うことになりそうなので新機能を追加しました。
https://beta.nextjs.org/docs/routing/fundamentals#the-app-directory

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もこのディレクトリを無視するようにしています。
https://beta.nextjs.org/docs/routing/defining-routes#convention

また、/pages/appは両方使えるようなので型定義を統合するようにしました。
もちろん片方だけでも使えます。

バグ報告

私の手元のNext.js 13ではCSS in JS周りの設定が上手く出来なくてpathpidaの検証まで出来ていません。どなたか使ってみてバグに気付いたらGitHubのIssueにお知らせください。
https://github.com/aspida/pathpida/issues

次はTypeScriptフルスタックフレームワークfrourioの更新情報を書く予定です。
Twitterをフォローしてお待ちください。
https://twitter.com/m_mitsuhide

Discussion