标签: vercel

找不到模块“@next/env”Next-js Vercel

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

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

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

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

node-modules reactjs next.js vercel

Muh*_*far

2021 06-24

6
推荐指数

1
解决办法

3895
查看次数

为什么我的 NextJS 性能得分在 web.dev 中如此不一致？

我们发现 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 来提供图像。

任何帮助将不胜感激。

performance lighthouse reactjs next.js vercel

Tho*_*aal

lucky-day

6
推荐指数

1
解决办法

2953
查看次数

如何将 GitHub Releases 与 Vercel 结合使用？

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

github semantic-versioning devops next.js vercel

Max*_*Max

lucky-day

6
推荐指数

0
解决办法

1650
查看次数

无法在 Vercel 上使用 serverSideTranslations

在我的索引页中，我正在使用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"
  }

Run Code Online (Sandbox Code Playgroud)

next.config.js

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

const prodConfig = {
    generateBuildId: () …

Run Code Online (Sandbox Code Playgroud)

netlify next.js vercel next-i18next

Nad*_*ror

lucky-day

6
推荐指数

2
解决办法

4933
查看次数

在 Vercel 上部署的 NextJS 的 API 路由上使用文件系统

我需要在 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

Run Code Online (Sandbox Code Playgroud)\n

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

catch Error: ENOENT: …

Run Code Online (Sandbox Code Playgroud)

api fs node.js next.js vercel

JMR*_*Dev

lucky-day

6
推荐指数

0
解决办法

2555
查看次数

部署到 Vercel 时，Google 字体未加载到 Next.js 中

运行应用程序时，http://localhost:3000一切正常且看起来很棒。但将我的 Next.js 应用程序部署到 Vercel 后，字体没有显示，日志中也没有显示任何内容。

我遵循了 Next.js 文档中的建议，这就是我的_document.tsx样子 -

import { Global } from '@mantine/core'
import { createGetInitialProps } from '@mantine/next'
import Document, { Head, Html, Main, NextScript } from 'next/document'

const getInitialProps = createGetInitialProps()

export default class _Document extends Document {
    static getInitialProps = getInitialProps

    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.googleapis.com" />
                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
                    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital@0;1&family=Roboto+Condensed:wght@300;700&display=swap" rel="stylesheet" />
                    <Global
                        styles={(theme) => ({
                            'body': {
                                backgroundColor: theme.colors.gray[3],
                                color: theme.colors.gray[8],
                                fontFamily: …

Run Code Online (Sandbox Code Playgroud)

next.js google-fonts vercel mantine

Tec*_*emn

lucky-day

6
推荐指数

2
解决办法

1万
查看次数

如何将 Vercel 与 Azure Repos 集成？

我正在考虑将 Vercel 用于我的前端架构，但目前我的代码库托管在 Azure Repos 中。

有没有办法将 Azure Repos 与 Vercel 集成？

azure vercel azure-repos

Jon*_*uza

lucky-day

6
推荐指数

1
解决办法

2725
查看次数

部署到 Vercel 时 NextJS 中出现 Typescript 错误，但在本地运行构建或 lint 时不会出现 Typescript 错误

首先，有一些关于类似标题的问题，但我不相信这是重复的，因为我认为这是最近对软件包或 vercel 的更改导致的。

我升级了今天正在构建的应用程序中的一些软件包..

这是更改的包

  "dependencies": {
    "next": "^13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.14.2",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.35.0",
    "eslint-config-next": "^13.2.3",
    "typescript": "4.9.5"
  }

Run Code Online (Sandbox Code Playgroud)

从那时起，当我尝试将相同的代码部署到昨天部署良好的 Vercel 时，我遇到了很多新的 linting 错误。这是一个例子

Type error: 'supplierId' is possibly 'undefined'.
  56 | 
  57 |   // Get Supplier Products
> 58 |   const supplierProductsQuery = trpc.supplierProducts.get.useQuery({supplier_id: supplierId}, { enabled: supplierId > 0, ...refetchNever });

Run Code Online (Sandbox Code Playgroud)

这段代码对我来说看起来不错。我知道该变量可能是未定义的，这就是为什么我将它用作标志来在未定义时启用某些功能。无论如何，这是一个旁白。重点是，我在本地运行时没有遇到任何类似这样的错误，运行下一个开发、下一个 lint 和下一个构建都没有错误地运行，但在 Vercel 上，它似乎突然变得更加严格，或者运行完全不同linting 规则。

有人能解释为什么会这样吗？

typescript eslint next.js vercel

jon*_*bbs

lucky-day

6
推荐指数

0
解决办法

1018
查看次数

身份验证后，职员重定向到本地主机

在我托管在 vercel 上的生产站点上，经过职员身份验证后，它会将我重定向到本地主机。这种情况仅发生在我用于开发的笔记本电脑上。

如果我连接到另一台设备上的生产站点，它会在身份验证后正确地将我重定向回 vercel 上托管的生产站点。

我正在关注 t3 堆栈的教程：https://www.youtube.com/watch ?v=YkOSUVzOAA4

我是这个堆栈的新手，并且使用 nextJS + vercel + clerk，所以我不知道从哪里开始。我将上传任何需要的代码。谢谢。

next.js vercel clerk

Suj*_*jio

lucky-day

6
推荐指数

1
解决办法

8167
查看次数

为什么 Next.js 13.4.2 应用程序放置一段时间后会在浏览器上显示 html 块

我在我的应用程序上使用 Next.js 13.4.2 中的应用程序路由器。在初始加载时，应用程序以应有的方式打开，一切正常，但我注意到应用程序停留足够长的时间后，或将选项卡切换到不同的选项卡。当我返回选项卡时，我打开了网站。它在浏览器上显示 html 代码块。该网站目前托管在 AWS amplify 上。

这是我离开页面几分钟后页面上显示的内容。

1:HL["/_next/static/media/7777133e901cd5ed-s.p.woff2",{"as":"font","type":"font/woff2"}] 
2:HL["/_next/static/media/916d3686010a8de2-s.p.woff2",{"as":"font","type":"font/woff2"}] 
3:HL["/_next/static/media/9a881e2ac07d406b-s.p.woff2",{"as":"font","type":"font/woff2"}] 
4:HL["/_next/static/media/bd427f25ac24d036-s.p.woff2",{"as":"font","type":"font/woff2"}] 
5:HL["/_next/static/media/d36a2a2bb416f59e-s.p.woff2",{"as":"font","type":"font/woff2"}] 
6:HL["/_next/static/css/2a07d734a20a99b3.css",{"as":"style"}]
7:HL["/_next/static/css/ecd948767e096f78.css",{"as":"style"}] 

0:[[
    ["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],
    "$L8",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2a07d734a20a99b3.css","precedence":"next"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ecd948767e096f78.css","precedence":"next"}]],["$L9",["$","meta",null,{"name":"next-size-adjust"}]]]
]] 
a:HL["/_next/static/css/458cf75f1ee9813b.css",{"as":"style"}] 
b:I{"id":"5227","chunks":["201:static/chunks/201-b763b97b8d16f706.js","185:static/chunks/app/layout-350020619d648b75.js"],"name":"","async":false} 
c:I{"id":"9544","chunks":["272:static/chunks/webpack-eccc90b774de8c50.js","667:static/chunks/2443530c-942d23a6246cf16c.js","139:static/chunks/139-b08bf36040abf8bb.js"],"name":"","async":false} 
d:I{"id":"99","chunks":["272:static/chunks/webpack-eccc90b774de8c50.js","667:static/chunks/2443530c-942d23a6246cf16c.js","139:static/chunks/139-b08bf36040abf8bb.js"],"name":"","async":false}
e:I{"id":"9288","chunks":["776:static/chunks/b7d461da-c24d426981069a69.js","358:static/chunks/ae573a17-86c3c0dbf6820279.js","11:static/chunks/11-ada55797f12a86c7.js","414:static/chunks/414-737d93b2fc27a9fe.js","553:static/chunks/553-0c921218202d70d5.js","798:static/chunks/app/privacy/layout-f55345026eeff814.js"],"name":"","async":false} 
f:I{"id":"2011","chunks":["821:static/chunks/1418c200-705f4a11b96a8412.js","739:static/chunks/543ac898-9e7c2265ce202fd3.js","11:static/chunks/11-ada55797f12a86c7.js","348:static/chunks/348-e537d997b144ed0c.js","201:static/chunks/201-b763b97b8d16f706.js","549:static/chunks/549-0ee789f6816fec15.js","384:static/chunks/384-e052fd0b08e9ac2f.js","857:static/chunks/app/events/[id]/page-234115e5ba29cda9.js"],"name":"","async":f ...

Run Code Online (Sandbox Code Playgroud)

我尝试在 vercel 上部署相同的应用程序，它在那里运行得很好。

我感觉这可能是aws的缓存问题。请问我该如何解决。

javascript amazon-web-services reactjs next.js vercel

May*_*uel

2023 06-16

6
推荐指数

0
解决办法

1307
查看次数