标签: vercel

我有一个没有集成 api 的 NextJS 应用程序，我想将其部署到 Vercel。当我在本地运行它时它工作正常yarn run dev，我也可以在yarn run build没有任何错误的情况下构建它。但是，当我部署 Vercel 时，我收到一个404 Error.

这是我的文件夹结构：

app/
  - components
  - pages
    - editor
      - [id].tsx
    ...tsx
  - public
  - utils
    - db
      api.ts

我正在使用 NextJs 10.0.3。

这是已部署应用程序的链接。

我没有 nextjs 配置文件。我的假设是错误是由动态路由引起的，但我找不到我的错误。此外，与仅动态页面相反，部署应用程序时没有页面在工作。

你有关于下一步去哪里的指示吗？

编辑 1：
这是 GitHub 存储库的链接。

编辑 2：我发现了一个问题，但不知道如何解决。

这是我的构建输出在 Vercel 上的样子：

这是它在 Vercel 上的样子：

不知道为什么整个_next文件夹都不见了。

如何实现 Next js 功能捕获所有路由 [[...slug.tsx]] ( https://nextjs.org/docs/routing/dynamic-routes#optical-catch-all-routes ) 而不删除索引。 js页面？如果我不删除它，我会收到此错误：

Error: You cannot define a route with the same specificity as a optional catch-all route ("/" and "/[[...slug]]").

我读到一条建议，将其更改为非可选捕获所有路线（[...slug.tsx]）..但这不允许我捕获没有 slug 的路线（即/post）

我是新使用 NextJs 的人，当尝试将我的项目部署到 Vercel 时，我收到以下错误：

错误！无服务器功能“api/auth”为 50.55mb，超出了最大大小限制 50mb。

我花了很多时间试图找到正确的答案，但没有找到。这是我发出的 api 请求的代码：

const { auth: adminAuth } = require("firebase/admin");

export default async function auth(req, res) {
  const tokenId = req.query.token;
  return new Promise((resolve) => {
    adminAuth
      .verifyIdToken(tokenId)
      .then((user) => {
        res.json(user);
        resolve();
      })
      .catch(() => {
        res.status(302).send("Invalid authentication");
        resolve();
      });
  });
}

如果有人能帮助我，我将不胜感激，谢谢大家！

与此问题类似How to run Github Actions with the 'deployment_status' kitty and only on the QAS Branch? 我想仅在特定分支上执行工作流程，但与deployment_status触发器结合使用。

因此，我只想在部署完成并且我们位于分支上时才执行端到端测试develop。

这里的问题是：在触发器上未设置变量deployment_status。github.ref它也写在文档中。所以我无法手动检查我是否在正确的分支上。

name: E2E

on:
  deployment_status:
    # does not work because it is ignored on deployment_status
    branches:
      - develop
      - stage
      - master
      - main

jobs:
  chrome:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      
      - name: Run Cypress
        uses: cypress-io/github-action@v2
        with:
          browser: chrome
          cache-key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} …

当我将 Parcel.js 部署到 Vercel 时，出现此错误：

@parcel/core: No transformers found for static/actions.glb.

以下是 Vercel 的完整部署日志：

Detected package.json
Installing dependencies...
Detected `package-lock.json` generated by npm 7...
npm WARN deprecated highlight.js@7.3.0: Version no longer supported. Upgrade to @latest
added 27 packages in 3s
154 packages are looking for funding
  run `npm fund` for details
Building...
 Build failed.
@parcel/core: No transformers found for static/actions.glb.
  /vercel/path0/node_modules/@parcel/config-default/index.json:3:3
     2 |   "bundler": "@parcel/bundler-default",
  >  3 |   "transformers": {
  >    |   ^^^^^^^^^^^^^^^^^
  >  4 |     "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
  >    | …

没关系...

错误与代码库有关（我正在使用的代码库monorepo位于vercel.json根目录中）。在vercel.js与react应用程序一起打包后，一切工作正常。

404问题

我有一个简单的React.js应用程序，带有wouter基于 - 的路由和Vercel部署，这让我遇到了一个小问题，我不知道解决方案。404它总是在刷新（子页面）后返回。

我的代码看起来有点像这样。

    <>
        <Route path='/' component={Intro} />
        <Route path='/dashboard' component={Dashboard} />
    </>

<Intro />我<Link />必须/dashboard将我转到哪个<Dashboard />页面。它确实可以在我的本地计算机、容器中以及基于 Linux 的部署中运行，但在vercel部署中却无法真正运行，即使我尝试通过vercel.json.

    <>
        <Route path='/' component={Intro} />
        <Route path='/dashboard' component={Dashboard} />
    </>

还尝试了替代版本rewrites，但仍然存在相同的问题。

{
    "github": {
        "silent": true
    },
    "rewrites": [
        {
            "source": "(.*)",
            "destination": "/index.html"
        }
    ]
}

此处提供的实时部署链接：pointrest-6ttd9zep8-araclx.vercel.app …

我有一个 Next.js 应用程序，正在部署到 vercel，并使用 ReactMarkDown 组件从 Strapi 后端渲染一些内容。

虽然这在本地有效，但部署失败并显示以下日志：

49:54  Error: Do not pass children as props. Instead, nest children between the opening and closing tags.  react/no-children-prop

<ReactMarkdown key={idx} children={content.answer} />

我认为这是罪魁祸首，它对使用“children”作为道具名称不满意，但是...... ReactMarkDown 组件渲染内容的道具是...... 孩子。

我已经尝试过这个，如下所示。

<ReactMarkdown >{content.answer}</ReactMarkdown>
<ReactMarkdown key={idx} children={[content.answer]} />

第一个不会改变任何内容，后者不起作用，内容不再显示。

任何建议都非常感激。

希望获得有关 Vercel 部署的一些帮助。我创建了一个 _middleware.ts 文件，用于检查用户 cookie 中的 JWT。

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { JwtPayload, verify } from 'jsonwebtoken'

export async function middleware(req: NextRequest) {
  let response = NextResponse.next()
  const url = req.nextUrl.clone()

  const token = req.cookies['allow-list']

  if (!token || token === 'deleted') {
    return response 
  }

  try {
    const decodedToken = verify(
      token,
      process.env.TOKEN_SECRET as string
    ) as JwtPayload
  } catch (e) {}

  return response
}

但是，正因为如此，当我尝试构建项目时，出现以下错误：“中间件页面/_middleware 中不允许动态代码评估（例如“eval”、“新函数”）”。有没有解决的办法？当我在本地运行它时它有效。

[22:59:29.409] Cloning …

在我的索引页中，我正在使用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: () …

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

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