Next踩坑记

报错1

Maybe one of these should be marked as a client entry with "use client": ./app/components/NavBar/index.tsx ./app/pages/menu/index.tsx ./app/page.tsx

解决方案


"use client"; // This is a client component 👈🏽

import { useState } from "react";

export default function Card() {
  const [state, setState] = useState(""); // I can use client hooks 👈🏽

  return <></>;
}

报错2


Module not found: Can't resolve 'dns'

解决方案

这个报错的原因主要是因为在_app.tsx或者在layout.tsx中想要获取全局的数据使用了getStaticProps或getServerSideProps，而在官网文档中

报错3


Can't resolve 'tls’

getDataBaseList可以在getStaticProps用，但不能在generateStaticParams用，会报错

解决方案

在 Next.js 项目中，getStaticProps 和 generateStaticParams 都是用于静态生成页面的函数，但它们的运行时环境有所不同。getStaticProps 是在服务器端运行的，而 generateStaticParams 是在构建时运行的。因此，可能会遇到一些与环境相关的问题。

使用getStaticPaths



export const getStaticPaths = async () => {
  const response = await getDataBaseList({
    pageId: NOTION_POST_ID,
    from: "tags-index",
  });
  const paths = response.tagOptions?.map((tag) => ({
    tag: encodeURI(tag.id),
  }));

  return {
    paths,
    fallback: true,
  };
};

报错4


Error: A required parameter (tag) was not provided as a string received undefined in getStaticPaths for /tags/[tag]

解决方案

这个错误是由于 getStaticPaths 函数中未能正确生成 tag 参数的路径。 getStaticPaths 函数需要返回一个对象，该对象包含 paths 属性，该属性是一个具有 params 对象的数组，每个 params 对象都应该包含一个 tag 字符串