$ ls ~yifei/notes/

Nextjs 中遇到的一些坑

Posted on:

Last modified:

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
WeChat Qr Code

© 2016-2022 Yifei Kong. Powered by ynotes

All contents are under the CC-BY-NC-SA license, if not otherwise specified.

Opinions expressed here are solely my own and do not express the views or opinions of my employer.

友情链接: MySQL 教程站