时间戳

首页 > 解决方案 > 删除 localhost 名称以部署 Next.js 时出现问题

reactjs - 删除 localhost 名称以部署 Next.js 时出现问题

问题描述

我正在做一个重要的 next.Js 项目。我在尝试更改一些 api 时被卡住了。

例如：

import axios from "axios";

export const fetchCategories = async (id = false) => {
  try {
    if (id === false) {
      let response = await axios({
        method: "get",
        url: `http://localhost:3000/api/category/create`,
        json: true,
      });
      return response;
    }

这个函数是一个向 next.js 自己的服务器 localhost 发出 axios 请求的组件，有没有办法改变这个 url 来获取实际的动态路由，而不是像这样的硬编码？我知道有一种方法我只是在努力解决这个问题。

标签： reactjsapiaxiosnext.js

解决方案

如果您使用

export const NEXT_URL =
  process.env.NEXT_PUBLIC_FRONTEND_URL || "http://localhost:3000";

然后在部署时设置一个名为 NEXT_PUBLIC_FRONTEND_URL 的环境变量，并将其设置为 Vercel 上 nextjs 网站的 URL。然后在页面中，当您需要 URL 时，您可以将其导入为import {NEXT_URL} from "file location"，然后在部署您的应用程序时，它将在默认为 http://localhost:3000 之前查找此环境变量。

这是我实施此项目的项目：LINK

您可以在 config/index.js 中看到它所在的位置，然后在我的 context/authcontext.js 中我主要使用它。

推荐阅读