Skip to main content

Pathpida with Next.js



pathpida

TypeScript friendly internal link client for Next.js.

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} />
</>
)
}