nextjs 的 Link 无法自定义 escape

Nextjs 中的 Link 的 href 对象如果传的是字典，直接调用的是 nodejs 的 URL 库，不能自定义 escape, 比如说空格会被强制格式化成加号，而不是 %20. 而且好像它使用的这个 API 在 11.0 已经 deprecated 了，所以需要啥 url 的话，还是自己格式化吧~

使用 nprogress

Nextjs 页面跳转的时候不会触发浏览器 Loading Spinner, 也就是转动的小圆圈，所以需要自己实现 一下，可以用 nprogress

在 _app.js 中：

import Router from 'next/router';
import NProgress from 'nprogress'; //nprogress module
import 'nprogress/nprogress.css'; //styles of nprogress

//Binding events.
Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}
export default MyApp;

使用绝对路径导入

tsconfig.json 中增加 baseUrl

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
+    "baseUrl": "./src"
  }
}

更好的方式是添加一个 prefix，比如 @ 来和其他的库区分：

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

使用：

// pages/index.js
import Button from '@/components/button'

在客户端读取 Cookie

async function getInitialProps (ctx) {
    return ctx.req.headers.cookie
}

参考

1. https://levelup.gitconnected.com/improve-ux-of-your-next-js-app-in-3-minutes-with-page-loading-indicator-3a422113304d
2. https://github.com/vercel/next.js/discussions/14057
3. https://nextjs.org/docs/api-reference/next.config.js/rewrites
4. https://stackoverflow.com/questions/67772541/how-to-access-cookies-from-the-server-in-next-js
5. https://nextjs.org/docs/advanced-features/module-path-aliases