DEV Community: Solufa

How to get Next.js internal links in a type-safe way

Solufa — Mon, 28 Dec 2020 03:43:41 +0000

Problem

There is Link that transitions to /post/1.



import Link from 'next/link'

export default () => {
  const url = `/post/${1}`
  return <Link href={url} />
}

Cannot statically type-check if /post/${pid} is correct as an internal link.
If the file pages/post/[pid].tsx does not exist, the page transition will fail.

Solution

Pathpida solves this problem.
Reads pages/ directory in Next.js and automatically generates a type definition file for getting internal links.

For example, if pages/ directory is in the following state



pages/[pid].tsx
pages/blog/[...slug].tsx
pages/index.tsx

the following TypeScript file will be generated automatically.

lib/$path.ts



export const pagesPath = {
  _pid: (pid: number | string) => ({
    $url: () => ({ pathname: '/[pid]', query: { pid }})
  }),
  blog: {
    _slug: (slug: string[]) => ({
      $url: () => ({ pathname: '/blog/[...slug]', query: { slug }})
    })
  },
  $url: () => ({ pathname: '/' })
}

As you can see, pagesPath property corresponds to a file in pages/ directory.
The object returned by $url method can be passed directly to next/link and next/router.

In the component, you can use it as follows.



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

export default () => {
  return <Link href={pagesPath.blog._slug(['a', 'b', 'c']).$url()} />
}

Usage in Next.js

This explanation assumes that Next.js and TypeScript have been set up beforehand.

Install pathpida and npm-run-all.



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

package.json



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

Start Next.js and pathpida in monitoring mode with Dev command.



$ yarn dev

$path.ts file will be automatically created in either utils/ or lib/ directory.



lib/
  $path.ts
pages/
  _app.tsx
  index.tsx

lib/$path.ts



export const pagesPath = {
  $url: () => ({ pathname: '/' })
}

If you add more files to pages/ directory, lib/$path.ts file will be changed.

pagesPath can be imported and used with next/link or next/router.



lib/
  $path.ts
pages/
  articles/
    [id].tsx
  users/
    [...userInfo].tsx
  _app.tsx
  index.tsx

components/ActiveLInk.tsx



import Link from 'next/link'
import { useRouter } from 'next/router'
import { pagesPath } from '../lib/$path'

function ActiveLink() {
  const router = useRouter()

  const handleClick = () => {
    router.push(pagesPath.users._userInfo(['mario', 'hello', 'world!']).$url())
  }

  return <>
    <div onClick={handleClick}>Hello</div>
    <Link href={pagesPath.articles._id(1).$url()}>
      World!
    </Link>
  </>
}

export default ActiveLink

How to specify a query

You can specify a query just by exporting Query type in pages/ component.
For example, to create /user?userId={number}, write the following

pages/user.tsx



export type Query = {
  userId: number
}

export default () => <div />

To set a query in another component, write the following



import { pagesPath } from '../lib/$path'

pagesPath.user.$url({ query: { userId: 1 }})

How to specify a hash

Just pass hash as an argument of $url method with any string you like.
# will be given automatically.



import { pagesPath } from '../lib/$path'

pagesPath.user.$url({ query: { userId: 1 }, hash: 'hoge' })
pagesPath.user.$url({ hash: 'fuga' })

You can also get the file path of `public/` directory

If you pass --enableStatic option to pathpida command, it will read the contents of public/ directory and generate a staticPath client.

package.json



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

If you have JSON and PNG images in public/



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

lib/$path.ts or utils/$path.ts

staticPath client can get the path string directly instead of $url method.

pages/index.tsx



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

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

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

Thanks for reading to the end

I'd appreciate it if you could give me a star on GitHub!

aspida / pathpida

TypeScript friendly internal link client for Next.js, Nuxt.js and Sapper.

pathpida

TypeScript friendly internal link client for Next.js and Nuxt.js.

Breaking change ⚠️

2022/11/25

Since pathpida >= 0.20.0 , removed Sapper support.

2022/02/24

Since pathpida >= 0.18.0 , requires TypeSciprt 3.8 or higher for Type-Only Imports.

Features

Type safety. Automatically generate type definition files for manipulating internal links in Next.js/Nuxt.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.

Install

Using npm:
```
$ npm
```
…

View on GitHub

「frourio」 Super Light Framework that sets up a dream Full-Stack TypeScript Environment with just one command!

Solufa — Mon, 16 Nov 2020 16:06:55 +0000

Allow me to introduce “frourio”, which was first released at the TypeScript Meetup #4 event in Tokyo in June 2020, and has received an update in October to make it even cooler!

frourio is a framework that compiles an entire application – from the frontend to the backend – and an object-relational (O/R) mapper in “one TypeScript”. It also enables integrated type checking.

It appears somewhat monolithic because it’s all contained in one directory, but the frontend and backend are separated into individual projects (via package.json), except for those that are connected by type.

This makes it possible to deploy the frontend to Vercel, or deploy the backend to AWS.

Here are new features of NEW frourio

The world’s fastest TypeScript framework
Setting up a development environment including a frontend SPA + REST server + OR mapper using a single command
Adapted to Vercel’s React Hooks Library「SWR」
Capable of using Dependency Injection in function
The logo is cute!

Let me explain one by one.

The world’s fastest TypeScript framework

Reference: https://github.com/frouriojs/benchmarks

There’s a reason why frourio is super-fast. Its server core is Fastify, which means frourio is wrapped around the world’s fastest engine.

However, using frourio is even faster than writing in Fastify by yourself.

frourio is designed to combine simple functions and prevent routing overhead. It performs optimizations based on the type information when compiling.

That’s how frourio fully utilizes the power of the Fastify web framework.

Setting up a development environment including a frontend SPA + REST server + OR mapper using a single command

*As of October 25, errors may result when performing installation in some Windows Subsystem for Linux (WSL) environments.

frourio can set up everything simply using a single command. This is just like the Next.js app when using the create-next-app, and the Nuxt.js app when using the create-nuxt-app.
 Please run the following command.

$ npx create-frourio-app

$ yarn create frourio-app

Once installed, the message below will be shown and a browser window will be opened automatically. *If a browser window does not open, please open the URL yourself.

open http://localhost:3000 in the browser

Enter a project name in「Directory name」that is also used as the name of package.json.

I recommend Fastify for the core framework because it’s being actively developed and has a benchmark that is five times faster than other web frameworks.

You can choose either Next.js or Nuxt.js for the Frontend setting.

It’s up to you to decide how to proceed with the setup process until the Daemon process manager takes over.

Prisma is a decent database toolkit that is recommended for the O/R mapper.
SQLite is good enough for a trial.

No preinstallation is required, and it can be closed inside the project.

The DataBase file location for SQLite can be the default.

If you would like to see a sample Dependency Injection code, select Jest and click the Create button.

A modal window will be shown, and installation will be started in the terminal window.

Once installed, the browser will be reloaded automatically and the Next/Nuxt ToDo Lists app will be shown. After installation, the Build process will take a while.

Adapted to Vercel’s React Hooks Library「SWR」

If you selected Next.js, you can find the code below in pages/index.tsx

On line 10, useAspidaSWR is the SWR wrapper.
It sends the /tasks GET request with apiClient.tasks as a key.
Response data are exactly the same as the SWR.
In fact, this argument is statically connected with the frourio controller.
A type definition for this API is included in server/api/tasks/index.js
The directory names after server/api correspond to API URL.

Let’s change the type of resBody to string, for a test.

Next.js: pages/index.tsx

frourio: server/api/tasks/controller.ts

An error occurred both in Next.js and frourio, that’s the cool part of frourio!

Capable of using Dependency Injection in function

In frourio, everything except for validator is written in function.
 Patterns that use Dependency Injection in the controller that have been written by function are usually not popular, but frourio has adopted a method called Functional Dependency Injection.

If you choose Jest as a test framework when installing, the frourio test code is included.

As seen in line 8 below, “findAllTask” which is the Prisma object injected, is defined.
 Upcasting is performed by using “as” to make dependency injection easy to use later.

See line 7 below; “findAllTask” and “print” are injected into the controller.

Write test code using your favorite tool.
See line 7 below; controller and also findAllTask (on line 8) need dependency injection, that’s why it’s nested.
However, "print" doesn’t have a dependency, so it’s directly injected by the arrow function.

Here’s the test result.

As you can see, it’s written much more simply than typical Constructor-Based Dependency Injection.

This is realized by installing the library called velona.
(Actually, velona is a spin-off library that is created after seeking how to use Dependency Injection in frourio)

The logo is cute!

Cute Character logo is designed by Indonesian Designer!

Please Star us.
https://frourio.io/