pathpidaの使い方

最近、pathpida というツールを使っていてとても便利に感じたので、その使い方をまとめてみようと思います。

pathpida とは？

pathpida とは、next.js のパスを自動で生成してくれるツールです。
リンクを作成する際に、<Link href="/articles/new">のように、パスを指定する必要がありますが、pathpida を使うと、<Link href={pagesPath().articles.new.$url()}>のように、自動で生成したパスを使用することができます。
文字列で管理するとタイポなどが発生する可能性があるのですが、pathpida を使うことで安全にパスを管理することができます。

導入方法

まず、pathpida をインストールします。

yarn add -D pathpida

設定

package.json

{
  "scripts": {
    ...,
    "dev:path": "pathpida --ignorepath .gitignore --output ./utils"
  }
}

package.json の scripts に上記のように設定を追加します。
--ignorepathは、無視するファイルを指定するためのオプションです。
--outputは、出力先を指定するためのオプションです。

実行

yarn dev:path

上記のコマンドを実行することで、pages フォルダ内のファイルを元に、utils フォルダ内に、パスを生成するファイル($path.ts)が作成されます。

使用方法

pages/index.tsx

import Link from "next/link"
import { pagesPath } from "../lib/$path"

console.log(pagesPath.post.create.$url()) // { pathname: '/post/create' }
console.log(pagesPath.post._pid(1).$url()) // { pathname: '/post/[pid]', query: { pid: 1 }}
console.log(pagesPath.post._slug(["a", "b", "c"]).$url()) // { pathname: '/post//[...slug]', query: { slug: ['a', 'b', 'c'] }}

export default () => {
  const onClick = useCallback(() => {
    router.push(pagesPath.post._pid(1).$url())
  }, [])

  return (
    <>
      <Link href={pagesPath.post._slug(["a", "b", "c"]).$url()} />
      <div onClick={onClick} />
    </>
  )
}

これだけで簡単にリンクを作成し、使用することができます。

ここからは基本から少し踏み込んだ使い方までを紹介していきます。

Query を使用する場合

pages/post/create.tsx

export type Query = {
  userId: number
  name?: string
}

export default () => <div />

pages/post/[pid].tsx

export type OptionalQuery = {
  limit: number
  label?: string
}

export default () => <div />

pages/index.tsx

import Link from "next/link"
import { pagesPath } from "../lib/$path"

console.log(pagesPath.post.create.$url({ query: { userId: 1 } })) // { pathname: '/post/create', query: { userId: 1 }}
console.log(pagesPath.post.create.$url()) // type error
console.log(pagesPath.post._pid(1).$url()) // { pathname: '/post/[pid]', query: { pid: 1 }}
console.log(pagesPath.post._pid(1).$url({ query: { limit: 10 }, hash: "sample" })) // { pathname: '/post/[pid]', query: { pid: 1, limit: 10 }, hash: 'sample' }

export default () => {
  const onClick = useCallback(() => {
    router.push(pagesPath.post._pid(1).$url())
  }, [])

  return (
    <>
      <Link href={pagesPath.post._slug(["a", "b", "c"]).$url()} />
      <div onClick={onClick} />
    </>
  )
}

上記の設定だと、pagesPath.post.create.tsxのページでは userId を必須としているので pagesPath.post.create.$url()のように、query を指定しないと、型エラーが発生します。

静的ファイルのパスを生成する場合

pathpida はpublic/**に配置されているファイルのパスも生成することができます。

package.json

{
  "scripts": {
    ...,
    "dev:path": "pathpida --enableStatic --ignorepath .gitignore --output ./utils"
  }
}

--enableStaticを追加することで、静的ファイルのパスを生成することができます。

使用方法はページパスと同じです。

pages/index.tsx

import Link from "next/link"
import { staticPath } from "../lib/$path"

console.log(staticPath.aa_json) // /aa.json

export default () => {
  return (
    <>
      <img src={staticPath.bb.cc_png} />
    </>
  )
}