Pathpida with Next.js

TypeScript friendly internal link client for Next.js.

Star

Features#

Type safety. Automatically generate type definition files for manipulating internal links in Next.js.
Zero configration. No configuration required, can be used immediately after installation.
Zero runtime. Lightweight because runtime code is not included in the bundle.

Install#

Using npm:
$ npm install pathpida --save-dev
Using Yarn:
$ yarn add pathpida --dev

Setup#

package.json

{
  "scripts": {
    "dev:pathpida": "pathpida --watch",
    "build:client": "pathpida && aspida && next build",
    "build:types": "pathpida && aspida && npm run build:frourio --prefix server"
  }
}

Usage#

pages/index.tsx
pages/post/create.tsx
pages/post/[pid].tsx
pages/post/[...slug].tsx

utils/$path.ts // Generated automatically by pathpida

pages/index.tsx

import Link from 'next/link'
import { pagesPath } from '~/utils/$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} />
  </>
}

Define 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 '~/utils/$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} />
  </>
}

Generate static files path#

package.json

{
  "scripts": {
    "dev:pathpida": "pathpida --enableStatic --watch",
    "build:client": "pathpida --enableStatic && aspida && next build",
    "build:types": "pathpida --enableStatic && aspida && npm run build:frourio --prefix server"
  }
}

pages/index.tsx
pages/post/create.tsx
pages/post/[pid].tsx
pages/post/[...slug].tsx

public/aa.json
public/bb/cc.png

utils/$path.ts // Generated automatically by pathpida

pages/index.tsx

import Link from 'next/link'
import { pagesPath, staticPath } from '~/utils/$path'

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

export default () => {
  return <>
    <Link href={pagesPath.post._slug(['a', 'b', 'c']).$url()} />
    <img src={staticPath.bb.cc_png} />
  </>
}