pathpida

TypeScript friendly pages and static path generator for Next.js.

Breaking change ⚠️

2024/12/14

Since pathpida >= 0.23.0 , removed Nuxt support.

2022/11/25

Since pathpida >= 0.20.0 , removed Sapper support.

Features

• Type safety. Automatically generate type definition files for manipulating internal links in Next.js.
• Zero configuration. No configuration required can be used immediately after installation.
• Zero runtime. Lightweight because runtime code is not included in the bundle.
• Support for static files. Static files in public/ are also supported, so static assets can be safely referenced.
• Support for appDir of Next.js 13 Layout.

Table of Contents

• Install
• Command Line Interface Options
• Setup
• Usage
• Define query
• Generate static files path
• License

Install

• Using npm:

  $ npm install pathpida npm-run-all --save-dev

• Using Yarn:

  $ yarn add pathpida npm-run-all --dev

Command Line Interface Options

Option	Type	Description
--enableStatic -s		Generate static files path in $path.ts.
--ignorePath -p	string	Specify the ignore pattern file path.
--output -o	string	Specify the output directory for $path.ts.
--watch -w		Enable watch mode. Regenerate $path.ts.
--version -v		Print pathpida version.

Setup

package.json

{
"scripts": {
"dev": "run-p dev:*",
"dev:next": "next dev",
"dev:path": "pathpida --ignorePath .gitignore --watch",
"build": "pathpida --ignorePath .gitignore && next build"
}
}

Usage

pages/index.tsx
pages/post/create.tsx
pages/post/[pid].tsx
pages/post/[...slug].tsx
lib/$path.ts or utils/$path.ts // Generated automatically by pathpida

or

src/pages/index.tsx
src/pages/post/create.tsx
src/pages/post/[pid].tsx
src/pages/post/[...slug].tsx
src/lib/$path.ts or src/utils/$path.ts // Generated automatically by pathpida

pages/index.tsx

importLinkfrom'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'] }}exportdefault()=>{constonClick=useCallback(()=>{router.push(pagesPath.post._pid(1).$url());},[]);return(<><Linkhref={pagesPath.post._slug(['a','b','c']).$url()}/><divonClick={onClick}/></>);};

Define query

pages/post/create.tsx

exporttypeQuery={userId: number;name?: string;};exportdefault()=><div/>;

pages/post/[pid].tsx

exporttypeOptionalQuery={limit: number;label?: string;};exportdefault()=><div/>;

pages/index.tsx

importLinkfrom'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 errorconsole.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' }exportdefault()=>{constonClick=useCallback(()=>{router.push(pagesPath.post._pid(1).$url());},[]);return(<><Linkhref={pagesPath.post._slug(['a','b','c']).$url()}/><divonClick={onClick}/></>);};

Generate static files path

package.json

{
"scripts": {
"dev": "run-p dev:*",
"dev:next": "next dev",
"dev:path": "pathpida --enableStatic --watch",
"build": "pathpida --enableStatic && next build"
}
}

pages/index.tsx
pages/post/create.tsx
pages/post/[pid].tsx
pages/post/[...slug].tsx
public/aa.json
public/bb/cc.png
lib/$path.ts or utils/$path.ts // Generated automatically by pathpida

or

src/pages/index.tsx
src/pages/post/create.tsx
src/pages/post/[pid].tsx
src/pages/post/[...slug].tsx
public/aa.json
public/bb/cc.png
src/lib/$path.ts or src/utils/$path.ts // Generated automatically by pathpida

pages/index.tsx

importLinkfrom'next/link';import{pagesPath,staticPath}from'../lib/$path';console.log(staticPath.aa_json);// /aa.jsonexportdefault()=>{return(<><Linkhref={pagesPath.post._slug(['a','b','c']).$url()}/><imgsrc={staticPath.bb.cc_png}/></>);};

License

pathpida is licensed under a MIT License.