Vercel 的 NextJS 构建和部署错误

Question

尝试将我的 Nextjs 应用程序部署到 vercel 时一直出错：

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: (0 , react_development_.useState) is not a function or its return value is not iterable
    at Categories (/vercel/path0/.next/server/chunks/930.js:122:72)
    at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:686:46)
    at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:316:51)
    at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:514:20)
    at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)

我在本地尝试了npm run build，但出现此错误：

> Build error occurred
Error: Export encountered errors on following paths:
        /
        /post/[slug]: /post/first-post
        /post/[slug]: /post/how-html-css-js-work
        /post/[slug]: /post/nextjs
        /post/[slug]: /post/react-hooks

所以我认为它必须在我的索引页面和/post/[slug] 页面中。我尝试了所有方法，例如将 getStaticPaths fallback 设置为 false 并在任何地方使用可选链接，但仍然出现错误。

有人可以帮帮我吗，当我完成项目时，我感到非常沮丧，我可以在我的localhost 中运行它，但是在部署/构建时失败了。

我的/ 页面：

import Head from "next/head";
import { PostCard, Categories, PostWidget } from "../components";
import { getPosts } from "../services";

export default function Home({ posts }) {
  const sortedPosts = posts.sort(
    (a, b) => new Date(b.node.createdAt) - new Date(a.node.createdAt)
  );

  return (
    <>
      <Head>
        <title>JBLOG | Home</title>
      </Head>
      <section className="bg-zinc-200 dark:bg-gray-500 transition-colors px-5">
        <div className="max-w-7xl mx-auto py-10">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
            <div className="md:col-span-8 col-span-1 ">
              {sortedPosts?.map((post) => (
                <PostCard key={post.node.title} post={post.node} />
              ))}
            </div>

            <div className="md:col-span-4 col-span-1">
              <div className="md:sticky relative md:top-[110px]">
                <PostWidget />
                <Categories />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export async function getStaticProps() {
  const posts = (await getPosts()) || [];

  return {
    props: {
      posts,
    },
  };
}

我的/post/slug 页面：

import React from "react";
import Head from "next/head";
import { getPosts, getPostDetails } from "../../services";
import {
  PostDetail,
  Categories,
  PostWidget,
  Author,
  Comments,
  CommentsForm,
} from "../../components";
import { useRouter } from "next/router";

const Post = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <Head>
        <title>{post?.title}</title>
      </Head>
      <section className="bg-zinc-200 dark:bg-gray-500 transition-colors px-5">
        <div className="max-w-7xl mx-auto py-10">
          <div className="grid grid-cols-1 md:grid-cols-12 md:gap-6">
            <div className="md:col-span-8 col-span-1 ">
              <PostDetail post={post} />
              <CommentsForm slug={post?.slug} />
              <Comments slug={post?.slug} />
            </div>

            <div className="md:col-span-4 col-span-1">
              <div className="md:sticky relative md:top-[110px]">
                <Author author={post?.author} />
                <PostWidget
                  slug={post?.slug}
                  categories={post?.categories?.map(
                    (category) => category.slug
                  )}
                />
                <Categories />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Post;

export const getStaticProps = async (context) => {
  const data = await getPostDetails(context.params.slug);

  return {
    props: {
      post: data,
    },
  };
};

export const getStaticPaths = async () => {
  const posts = await getPosts();

  return {
    paths: posts.map((post) => ({ params: { slug: post.node.slug } })),
    fallback: true,
  };
};

Answer 1

你的npm run build 是什么？ https://nextjs.org/docs/basic-features/data-fetching

fallback: true 使用下一个导出时不支持。