Next.js 踩坑记录

最近博客前端重新换了技术栈写了一下，改用了支持SSR渲染的next.js前端框架，基于react，前前后后踩了不少的坑，从大概4月份开始的，中途遇到了很多卡手的难题，在网上查阅相关的资料也大多都是国外的，以至于到现在才算是有雏形（~~其实也有摸鱼~~）。在这里先记录一些。

Next.js和已有后端项目的结合

首先Next.js中有一个API 路由东西，可以理解为在 Next.js 中可以直接写 node 代码作为后端服务来运行，直接维护一个全栈项目，使用文件路径作为路由地址，开始的时候被这个误导了，一直在用它这个api路由，后来还真的想去用Next.js写全栈了。

不过在那个时候了解了一个叫Prisma的框架，是一个功能强大的数据库工具和 ORM 框架，它简化了与数据库的交互，并提供了类型安全、高效和直观的方式来管理应用程序的数据层。使用 Prisma，开发人员可以更专注于业务逻辑的开发，而无需过多关注底层数据库的操作，百科如是的说。实操了一下，感觉是挺新的，也挺厉害，就是我要是再推翻后端框架，感觉工作量就不是一般的大了。

我有后端服务的，所以我只需要直接在组件里调用即可，不过需要注意的是，Next.js它里面的组件分为服务端组件（页面组件）和客户端组件，在项目根目录下的pages下的都是服务端组件，在服务端组件里面可以使用getInitialProps, getServerSideProps, getStaticProps 。这些都是用于数据获取的方法：

getInitialProps: 这是 Next.js 早期版本中使用的一种方式，用于在服务器端获取数据并将其传递给页面组件。它可以用于服务器渲染和客户端渲染，并且可以在每次页面刷新时获取新数据。然而，自从 Next.js 9.3 版本起，推荐使用 getServerSideProps 或 getStaticProps 替代该方法。
getServerSideProps: 这个方法用于在每个请求时在服务器端获取数据，并将其作为 props 传递给页面组件。它适用于需要在每次请求时获取最新数据的情况，比如需要根据用户的登录状态进行动态渲染。getServerSideProps 返回的数据将在每次请求时都被计算，因此它可以实现动态的服务器渲染。
getStaticProps: 这个方法用于在构建时在服务器端获取数据，并将其作为 props 传递给页面组件。它适用于静态生成的页面，即页面内容在构建时就已经确定，并且不会因为用户的请求而变化。getStaticProps 可以在构建时预渲染页面，从而提供更好的性能和缓存效果。

这些方法都是异步函数，而且在方法里调用自己的后端api，要使用全路径，即使是代理转发也不行。

另外在Next.js 13中，新加了一种app目录模式，去掉了page目录，大概了解了一下，app目录模式，默认是服务端组件，要转变成客户端组件可以在文件头部写上"use client"，这个组件就变成客户端组件了，当然其下如果有组件也是客户端组件了。新版本也没有了以上三种方法，获取数据直接用异步函数获取即可。

以下是我在服务端获取数据的一个示例：

export default function Whisper({
      data,
      statistics,
    }: InferGetServerSidePropsType<typeof getServerSideProps>) {

    ......

  return (
    ......
  );
}

export async function getServerSideProps() {
  const baseUrl = process.env.BASE_URL;
  let data: any = [];
  await request.get(`${baseUrl}/messages`).then((res: any) => {
    data =
      res && res.success ? res.data.filter((v: any) => v.site !== "-1") : [];
  });
  const res1: any = (await request.get(`${baseUrl}/statistics`)) || null;
  const statistics = (await res1) && res1.data;
  return {
    props: {
      data,
      statistics,
    },
  };
}

这里为了好维护，设置了一个环境变量来拼api的全路径。在getServerSideProps方法里按照我的理解主要是为了预渲染，做SEO，后续的数据获取及交互的一些接口请求，正常在方法里面写就好了。那说到交互，那么就要来说说在Next.js中怎么解决跨域了。

Next.js的一些配置

在根目录会有一个next.config.js文件，就是项目的配置文件，配置这块很多，我只讲讲我用到了的，且觉得大概率都会用到的。

跨域配置

const nextConfig = {
  async rewrites() {
    const ret = [
      {
        source: "/api/:path*",
        destination: "http://localhost:8001/:path*", // 根据实际情况来
      },
      ......
    ];
    return {
      beforeFiles: ret,
    };
  },
};
module.exports = nextConfig；

设置环境变量

const nextConfig = {
  env: {
    BASE_URL: process.env.BASE_URL,
  },
};
module.exports = nextConfig；

这里我是在根目录有.env ，取的它的值。

配置图片解析域名

在Next.js中，使用Next.js的

组件来显示图像时，Next.js会自动优化图像并提供一些功能，如自动调整图像大小、延迟加载和响应式图像显示，这是非常好用的一个功能。但是，为了确保安全性和性能，Next.js默认情况下只允许从同一域名下的图像进行加载，所以要用此功能优化其他域名下的图片资源文件，需要在配置文件配置上对应的域名，如下：

const nextConfig = {
  images: {
    domains: [
      "cdn.staticaly.com",
      "s2.loli.net",
      "i.loli.net",
    ],
  },
};
module.exports = nextConfig；

这样配置后，Next.js将允许从这三个域名加载图像。如果你尝试从其他域名加载图像，Next.js将会阻止加载，并在控制台中显示错误信息。

需要注意的是，domains 属性只在使用

组件时生效，如果你直接使用

标签来显示图像，则不会进行域名检查。

配置cdn

可以在Next.js中，将打包后的static文件，使用cdn来优化网站加载速度，如下需要对配置做一些修改：

const isProd = process.env.NODE_ENV === "production";

const nextConfig = {
  assetPrefix: isProd
    ? "https://cdn.example.com" // 根据自己的cdn服务来定
    : "",
};
module.exports = nextConfig；

如上配置后，在生产环境下，项目加载静态资源文件，会从https://cdn.example.com这个域名下找。

其他配置

如果你采用静态资源打包方式部署自己的项目，可能需要配置一下打包文件的输出目录：

const nextConfig = {
  output: "standalone", // 这个目录名称是不能变的
};
module.exports = nextConfig；

如果需要对项目做体积优化，可能会用到：

  experimental: {
    legacyBrowsers: false,
  },

这样的意思是不支持旧版浏览器。这意味着，Next.js将不会生成针对旧版浏览器的兼容性代码，以便提供更好的性能和较小的文件大小。看你需要对旧版浏览器兼容不。

写法上需要注意的点

在Next.js中，不要使用P标签下包裹着P标签，p标签下包裹着div标签，这样会导致出现服务端和客户端渲染的结果不同儿出现报错。
避免在预渲染的时候使用到window 和 storage 等客户端才有的功能。
在引入第三方依赖或者组件的时候，尽量使用dynamic动态导入，只加载需要的，避免打包体积太大。
在Next.js中如果需要自定义每一个页面组件的head做SEO或者是引入第三方js，css，font等，使用Next.js自带的对应组件，找到适合的模式，可以得到一定的性能提升。
Next.js支持多种CSS样式的处理方式，包括内联样式、CSS模块和CSS-in-JS等。可以根据项目的需求选择合适的方式来处理样式，如果是使用CSS模块，有时候可能会用到动态改变className，可以用如下写法：

      <div
        className={
          styles[`${card.key === active ? "k-info-card-option-active" : ""}`]
        }
        onClick={() => {
          setActive(card.key);
        }}
        key={card.key}
      ></div>

大概有这些吧......

写在最后；

地点：成都（~~社畜ing~~）时间: 2023-07-23 23:30:00 心情：头晕晕的有点难受