标签: vercel

我正在为计划部署到 Vercel 的项目做一些早期研究。我想知道以下是否可能：

我想在 GitHub 存储库上拥有。此存储库将为 API 令牌和基本设置使用环境变量。

我有我想要创建的项目的三个版本。我宁愿拥有一个存储库，而不是创建三个单独的存储库，然后使用环境变量进行细微的更改。这将使更新、修复等更加容易。

所以，我的问题是：是否可以使用 Vercel 将一个存储库部署三次，每次都具有不同的环境变量？

我试图部署到 Vercel 我之前已经在其他项目中完成了它，但在这种情况下，构建失败，它提到它没有找到页脚组件，构建在本地机器上完美运行。

11:55:14.850    Cloning completed in 533ms
11:55:14.851    Analyzing source code...
11:55:17.183    Installing build runtime...
11:55:17.605    Build runtime installed: 422.099ms
11:55:18.023    Looking up build cache...
11:55:18.054    Build cache not found
11:55:18.481    Installing dependencies...
11:55:18.694    yarn install v1.22.4
11:55:18.757    [1/4] Resolving packages...
11:55:19.090    [2/4] Fetching packages...
11:55:27.361    info fsevents@2.1.3: The platform "linux" is incompatible with this module.
11:55:27.361    info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
11:55:27.365    info fsevents@1.2.13: The platform "linux" is incompatible …

我需要将访问者从 重定向/Contact到/contact。

当我按照文档中的描述进行操作时，我得到了一个无限重定向循环。

这是我尝试过的：

// next.config.js
async redirects() {
    return [
        {
            source: '/Contact',
            destination: '/contact',
            permanent: true
        }
    ]
}

当我将下一个 js 站点部署到 vercel 时遇到此构建错误

15:02:38    > Build error occurred
15:02:38    Error: Export encountered errors on following paths:
15:02:38        /about/undefined
15:02:38        at exportApp (/vercel/workpath0/node_modules/next/dist/export/index.js:30:1103)
15:02:38        at processTicksAndRejections (internal/process/task_queues.js:97:5)
15:02:38        at async /vercel/workpath0/node_modules/next/dist/build/index.js:39:69
15:02:38        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:1:525

我的网站没有称为 about 的页面，所以我真的不知道这个错误指的是什么。我尽可能多地检查以找到可靠的答案，但不能。任何帮助表示赞赏！

当我尝试在 Vercel 上构建我的应用程序时，我不断收到此错误，但它在本地运行没有问题。

这是错误消息

Cannot find module Type error: Cannot find module './sidenav/SideNav' or its corresponding type declarations.

在这一行

import SideNav from "./sidenav/SideNav"

当导入时，这在同一组件中工作得很好

import NavigationBar from "./navigationBar/NavigationBar"

我的 SideNav 没什么特别的

const SideNav = () => {

  return (
    <>
      <div></div>
    </>
  );
};

export default SideNav;

知道问题出在哪里吗？

我开发了一个 Next.js 应用程序，可以在我的本地计算机上正常运行。我正在尝试在 Vercel 上部署我的应用程序，但它不断向我抛出错误，Cannot find module '@next/env'如下所示。

我认为这是因为包裹next-sitemap。我检查了我的节点模块，文件夹内没有env文件或文件夹@next。我也进行了研究，但未能找到任何解决方案。

我还尝试在 Netlify 上部署我的应用程序，但它抛出了相同的错误。任何帮助将不胜感激。

更新：我终于能够通过将 next.js 更新到 10.2.3 来解决这个问题

我们发现 web.dev 与 NextJS 应用程序的性能分数非常不一致。起初，我们有大约 30 个性能，所以我们开始优化。现在我们在 Lighthouse 的成绩约为 90，领先 5。然而，当我们在 web.dev 上测试它时，我们的分数从 73 到 99 不等，这是一个巨大的差异。这可能是什么原因造成的？当您比较具有完全相同的包大小的两份报告时，其中一份的总阻塞时间为 670 毫秒，另一份的总阻塞时间为 70 毫秒。此外，“最小化主线程工作”和“减少 Javascript 执行时间”也有很大不同。“最小化主线程工作”在低性能运行时为 3.5 秒，在高性能运行时为 2.8 秒。“减少 Javascript 执行时间”在性能较低的运行中为 1.5 秒，而在高性能运行中根本不存在（所以我假设为 0 秒）。同样，这是使用完全相同的 JS 和 CSS 包。

什么可能导致性能下降？这是我的代码中的任何错误还是这只是 Lighthouse/web.dev 中的问题？我在 Vercel 上托管，它通过 CDN 为我的网站提供服务，并且我还使用 CDN 来提供图像。

任何帮助将不胜感激。

我正在使用 Next.js 开发一个电子商务网站，并希望将其部署到 Vercel。我已经看到 Vercel 使用 Deploy-Preview-Ship 模型 (DPS)，虽然我不确定这是否违反，但我想知道是否有办法将 GitHub 操作/标签链接到我的 Vercel 部署，所以我可以部署每个 GitHub 版本，而不是每次合并到主分支。这样我就可以保持更好的语义版本控制，并且可以将 PR 和更改批量批量发布到版本中。有什么想法或者我最好在每次合并到主程序时部署到生产环境吗？

在我的索引页中，我正在使用serverSideTranslations函数。查找翻译文件时出现错误。此错误仅发生在使用 的页面上serverSideTranslations。

我部署到 Vercel 和 Netlify。在他们两个中我都遇到了同样的错误。

在_app.js我正在使用appWithTranslation.

依赖项：

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@netlify/plugin-nextjs": "^3.9.2",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dayjs": "^1.10.4",
    "dotenv": "^8.2.0",
    "fs-extra": "^10.0.0",
    "is-mobile": "^3.0.0",
    "next": "^11.1.2",
    "next-i18next": "^8.9.0",
    "next-seo": "^4.20.0",
    "node-fetch": "^2.6.1",
    "parse": "^3.1.0",
    "react": "17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "17.0.1",
    "react-infinite-scroller": "^1.2.4",
    "recoil": "^0.1.2",
    "sass": "^1.43.2",
    "ts-node": "^9.1.1"
  }

next.config.js

const path = require('path');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
const i18NextConfig = require('./next-i18next.config');

const prodConfig = {
    generateBuildId: () …

我需要在 NextJS 中的 API 路由上使用 fileStystem 方法作为 readdirSync。它在本地工作，但部署在 Vercel 上时，请求会以 500 状态代码进行响应。

这是 Vercel 的功能日志：

catch Error: ENOENT: no such file or directory, scandir \'/var/task/_posts\'\n    at Object.readdirSync (fs.js:1043:3)\n    at getAllArticles (/var/task/.next/server/chunks/230.js:135:67)\n    at __WEBPACK_DEFAULT_EXPORT__ (/var/task/.next/server/pages/api/search.js:37:93)\n    at Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils.js:101:15)\n    at processTicksAndRejections (internal/process/task_queues.js:95:5)\n    at async Server.handleApiRequest (/var/task/node_modules/next/dist/server/next-server.js:770:9)\n    at async Object.fn (/var/task/node_modules/next/dist/server/next-server.js:661:37)\n    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:205:32)\n    at async Server.run (/var/task/node_modules/next/dist/server/next-server.js:841:29)\n    at async Server.handleRequest (/var/task/node_modules/next/dist/server/next-server.js:292:20) {\n  errno: -2,\n  syscall: \'scandir\',\n  code: \'ENOENT\',\n  path: \'/var/task/_posts\'\n}\n

这是 API 路由本身 (/pages/api/search.ts)：

catch Error: ENOENT: …