nextjs

[xccjk]

nextjs下设置路径别名的方式

项目使用了ts

新建tsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

未使用ts

新建jsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

[xccjk]

nextjs中代理请求到指定域名

在next.config.js中，通过配置rewrites fallback来把请求代理到指定域名

module.exports = {
  ...
  async rewrites() {
    return {
      fallback: [
        {
          source: '/:path*',
          destination: `https://host/:path*`,
        },
      ],
    }
  }
}

[xccjk]

nextjs window is not defined

问题原因，nextjs是服务端渲染的，在服务器预渲染HTML，然后发送到客户端进行渲染。因此在服务端渲染时，是获取不到浏览器对象window/document等

dynamic 动态导入组件

home.js

export default Home () {
  console.log(window);

  return (
      ...
  )
}

app.js

import dynamic from 'next/dynamic';

const HomePage = dynamic(import('./home'), { ssr: false });

export default App () {
  return <HomePage />
}

useEffect

因为useEffect方法在服务端渲染过程中不会执行，而是在HTML挂载到客户端后才执行，因此可以在useEffect中直接使用window

import React, { useEffect } from 'react';

export default Home () {
  useEffect((
    console.log(window)
  ), [])

  return (
      ...
  )
}

[xccjk]

nextjs中使用braft-editor，报错window is not defined

braft-editor中使用了浏览器对象window等，在next中使用时会报window is not defined相关错误

解决方案：

src/home/conponents/editor/index.js

import React from 'react';

// 引入编辑器组件
import BraftEditor from 'braft-editor';
import ColorPicker from 'braft-extensions/dist/color-picker';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import 'braft-extensions/dist/color-picker.css';

import styles from './index.module.scss';

BraftEditor.use(
  ColorPicker({
    includeEditors: ['editor'],
    theme: 'dark' // 支持dark和light两种主题，默认为dark
  })
);

function Editor({ data = {} }) {
  const { content } = data;
  const dom = BraftEditor.createEditorState(content);
  let html = dom.toHTML();

  return (
    <div
      className={styles.txt}
      dangerouslySetInnerHTML={{
        __html: html || ''
      }}
    />
  );
}

export default Editor;

src/home/index.js

import React from 'react';
import dynamic from 'next/dynamic';

const Editor = dynamic(() => import('./components/editor'), { ssr: false });

const Home = ({ data }) => {
  return (
    <>
      <Editor />
      ...
    </>
  );
};

export default Home;

通过把dynamic ssr设置为false，可以让组件不使用服务端渲染，在本地环境跑起来也是正常的，但是在运行next build时还是会报相同的错误

问题原因：nextjs中pages下面的.js、jsx、.ts、.tsx文件都会当做一个路由，并且默认情况下，nextjs将预渲染每个 page页面(服务端渲染)，因此还是会报window相关错误

解决方案：

• 把braft-editor相关组件进行封装，放在src/components目录下

• 设置next.config.js中的pageExtensions，把路由文件采用.page.js命名，组件采用.js命名，这样在编译时就不会预渲染.js文件了

module.exports = {
  ...
  pageExtensions: [
    // `.page.tsx` for page components
    'page.tsx',
    'page.js',
    // `.api.ts` for API routes
    'api.ts',
  ],
}

[xccjk]

如何在nextjs develop模式下，关掉react严格模式下的渲染2次的问题

在新版react中，develop环境中，严格模式(React.StrictMode)下会重复渲染两次的问题，在正式环境中不会重复渲染

issue

带来的问题：

接口会重复调用，在有些场景下重复调用接口会导致报错，develop下调试时带来不便

解决方案：

手动关闭严格模式，即不使用React.StrictMode包裹组件

nextjs中通过配置中的reactStrictMode来设置

next.config.js

module.exports = {
  ...
  reactStrictMode: false,
}