构建时出错。 （与generateStaticParams()或API相关的东西）

问题描述 投票：0回答：1

当我在项目中使用 

localhost:3000
作为 
baseURL
时，构建会失败，但当我使用 Vercel 生产构建 URL 时，它可以完美运行。这是我的代码：

import { Blog, getBlogs, getBlog } from "@/services/blog";
import { Clock } from "@phosphor-icons/react/dist/ssr";

export async function generateStaticParams() {
  try {
    const data: Blog[] = await getBlogs();
    return data?.map((post?: Blog) => ({
      params: {
        title: `${post?.title.split(" ").join("-").toLowerCase()}-${post?.id}`,
      },
    }));
  } catch (error) {
    console.error("Error generating static params:", error);
    return [];
  }
}

const SigleBlogPage = async ({ params }: { params: { title: string } }) => {
  const id = params.title.split("-").pop();

  if (!id) {
    return null;
  }

  const post = await getBlog(id);

  return (
    <div className="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto border-b border-gray-200 pb-2">
        <h1 className="text-4xl font-bold mb-4">{post?.title}</h1>
        <div className="text-gray-700 mb-2 md:mb-4">
          <p>{post?.description}</p>
        </div>
        <div className="text-sm text-gray-500 flex items-end justify-between">
          <span className="flex sm:gap-2 flex-col sm:flex-row">
            <span>{post?.author}</span>
            <span className="hidden sm:block">•</span>
            <span>{post?.date}</span>
          </span>
          <span className="flex gap-2 items-center">
            <span className="hidden sm:block">{post?.tags?.join(", ")}. - </span>
            <span className="flex items-center gap-1">
              <span>{Math.ceil(post?.description?.length / 1000)} min</span>
              <Clock size={15} className="text-gray-500" />
            </span>
          </span>
        </div>
        <div className="prose lg:prose-xl"></div>
      </div>
    </div>
  );
};

export default SigleBlogPage;

博客服务代码

import axiosInstance from "@/lib/axiosInstance";

class BlogError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "BlogError";
  }
}

export interface Blog {
  id: number;
  title: string;
  author: string;
  date: string;
  description: string;
  tags: string[];
  imageDescription: string;
}

export const getBlogs = async () => {
  try {
    const response = await axiosInstance.get("/api/blog/posts");
    return response.data;
  } catch (error: any) {
    switch (error.response?.status) {
      case 500:
        throw new BlogError("Internal Server Error");
      default:
        throw new BlogError("Error fetching blogs");
    }
  }
};

export const getBlog = async (id: string) => {
  try {
    const response = await axiosInstance.get(`/api/blog/posts/${id}`);
    return response.data;
  } catch (error: any) {
    switch (error.response?.status) {
      case 500:
        throw new BlogError("Internal Server Error");
      default:
        throw new BlogError("Error fetching blog");
    }
  }
};

Axios实例

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: process.env.URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export default axiosInstance;

使用本地主机构建输出

当我使用 

localhost:3000
在本地运行构建时：

npm run build

> [email protected] build
> next build

▲ Next.js 14.2.4
- Environments: .env.local

Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
Collecting page data  .Error generating static params: a [BlogError]: Error fetching blogs
    at n (C:\Users\Sergio\Desktop\cmmg\.next\server\app\blog\[title]\page.js:1:9474)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object._ [as generateStaticParams] (C:\Users\Sergio\Desktop\cmmg\.next\server\app\blog\[title]\page.js:1:6633)
    at async buildParams (C:\Users\Sergio\Desktop\cmmg\node_modules\next\dist\build\utils.js:1026:40)
    at async C:\Users\Sergio\Desktop\cmmg\node_modules\next\dist\build\utils.js:1043:33
    at async C:\Users\Sergio\Desktop\cmmg\node_modules\next\dist\build\utils.js:1177:114
    at async Span.traceAsyncFn (C:\Users\Sergio\Desktop\cmmg\node_modules\next\dist\trace\trace.js:154:20)
✓ Collecting page data
Generating static pages (4/27)  [=   ]Error fetching news: K [AggregateError]
    at K.from (C:\Users\Sergio\Desktop\cmmg\.next\server\chunks\712.js:11:11099)
    at y.<anonymous> (C:\Users\Sergio\Desktop\cmmg\.next\server\chunks\712.js:13:8636)
    at y.emit (node:events:519:28)
    at d.<computed> (C:\Users\Sergio\Desktop\cmmg\.next\server\chunks\712.js:1:13567)
    at ClientRequest.emit (node:events:519:28)
    at Socket.socketErrorListener (node:_http_client:492:9)
    at Socket.emit (node:events:519:28)
    at emitErrorNT (node:internal/streams/destroy:169:8)
    at emitErrorCloseNT (node:internal/streams/destroy:128:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
    at aF.request (C:\Users\Sergio\Desktop\cmmg\.next\server\chunks\712.js:13:20551)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async i (C:\Users\Sergio\Desktop\cmmg\.next\server\app\(auth)\page.js:1:3192)
    at async l (C:\Users\Sergio\Desktop\cmmg\.next\server\app\(auth)\page.js:1:3339) {
  code: 'ECONNREFUSED',
  errors: [

使用 Vercel BASE URL 构建输出

当我使用 Vercel URL 部署和构建时（用于 API 请求等...）：

npm run build

> [email protected] build
> next build

▲ Next.js 14.2.4
- Environments: .env.local

Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (27/27)
✓ Collecting build traces
✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    190 B          99.1 kB
├ ○ /_not-found                          871 B            88 kB
├ ○ /admin                               162 B          87.3 kB
├ ƒ /admin/logs                          162 B          87.3 kB
├ ○ /admin/news                          2.73 kB         116 kB
├ ○ /analiticas                          162 B          87.3 kB
├ ○ /api                                 0 B                0 B
├ ƒ /api/auth/send-code                  0 B                0 B
├ ƒ /api/auth/verify-code                0 B                0 B
├ ○ /api/banner                          0 B                0 B
├ ○ /api/blog/posts                      0 B                0 B
├ ƒ /api/blog/posts/[id]                 0 B                0 B
├ ƒ /api/login                           0 B                0 B
├ ○ /api/logout                          0 B                0 B
├ ƒ /api/logs                            0 B                0 B
├ ƒ /api/news                            0 B                0 B
├ ƒ /api/register                        0 B                0 B
├ ƒ /api/user                            0 B                0 B
├ ○ /artistas                            190 B          99.1 kB
├ ○ /blog                                190 B          99.1 kB
├ ● /blog/[title]                        162 B          87.3 kB
├ ○ /catalogo                            162 B          87.

3 kB
├ ○ /contabilidad                        162 B          87.3 kB
├ ○ /engagement                          162 B          87.3 kB
├ ○ /general                             162 B          87.3 kB
├ ○ /informes                            162 B          87.3 kB
├ ○ /login                               1.92 kB         122 kB
└ ○ /proyectos                           162 B          87.3 kB
+ First Load JS shared by all            87.1 kB
  ├ chunks/23-d5dfd65ed9ffc36f.js        31.5 kB
  ├ chunks/fd9d1056-ec3e518d3a192d14.js  53.6 kB
  └ other shared chunks (total)          1.96 kB
ƒ Middleware                             43.7 kB

为什么使用 

localhost:3000
时本地构建失败，但与 Vercel 生产构建完美配合？我该如何解决这个问题？

任何见解或建议将不胜感激。

reactjs next.js
1个回答
0
投票

在 

Axios Instance
中，他们不需要使用 
baseURL
，因为无论 URL 的参数是什么，它都会自动附加到当前 URL 

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: process.env.URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export default axiosInstance;

或者您甚至可以简单地致电 

api

const response = await axios.get(`/api/blog/posts/${id}`);

通过使用此参数，参数将附加到当前 URL，无论是 

localhost
还是 
production URL

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.