我有一个关于aws amplify的Next.js项目。当我进行纱线构建时会出现以下错误： > Build error occurred { /Users/imyjimmy/project/node_modules/@aws-amplify/ui/dist/style.css:13 :root { ^ SyntaxError: Unexpected token : 是的，我尝试在next.config.js的顶部添加以下内容： if (typeof require !== 'undef
在我的下一个项目中，我需要添加一些脚本外部js文件。 像这样： 但这给了我一个错误 你知道我该怎么做吗？在你的\u document.js中，在标签下面添加脚本 <body> <Main /> <NextScript /> <script src="assets/js/productFactory.js"></script> </body> 在您的\u document.js中，在标记下面添加脚本 <
我正在将我的应用程序迁移到Next.js。目前我的url结构如下： www.example.com/ <-- English www.example.com/de <-- German www.example.com/page <-- English www.example.com/de/page <-- German module.exports = { i18n: { locales: ['en', 'de'], defaultLocale: '
我已根据以下示例添加了材质UI 下面是我的代码 import React from 'react'; import Document, {Head, Html, Main, NextScript} from "next/document"; import {ServerStyleSheets} from '@material-ui/core/styles'; import theme from "../theme"; export default cla
这是否得到了某种支持？我想在next.js完成后执行任意代码来后期处理生成的HTML/css/etc。您可以在Vercel中使用自定义的build命令，该命令同时执行生成和后期生成：纱线运行构建和纱线运行您的后期生成脚本。 .在package.json中，postbuild命令是否有效？也许先测试一些简单的东西，比如回显一个值。你也可以有一个自定义的build命令，因此你可以简单地运行warn运行build&&你的自定义脚本如果你想添加它作为答案，你的第二个建议有效。完成了，你试过postbu
我是Nextjs新手，对Nextjs中的客户端渲染和服务器端渲染有一些疑问 我知道有两种方法可以在Nextjs上获取数据。其中之一是使用useQueryhook，但只能在React组件函数上调用。这是否意味着它仅在从客户端呈现页面时运行 我读了一篇关于如何将apolloClient连接到Nextjs的帖子。据说 始终为SSR创建一个新的apolloClient实例，并仅为CSR创建一个apolloClient实例 下面是示例代码 export function initializeApoll
我已经尝试过几次使用快速启动方法npx create next app从头开始一个NextJS项目，并遵循教程示例中概述的iInstructions。我想创建一个静态HTML站点 我将构建和导出作业添加到包.json中的脚本标记中： "scripts": { "dev": "next dev", "build": "next build", "export": "next export", "start": "next start" }, 并根据示例创建
我是否可以使用env.js文件而不是.env文件来加载环境变量，在next.config.js文件中使用next.js？如果是，是否有人可以帮助您使用示例代码的语法？如果您的根文件夹中有一个类似以下内容的env.js文件： module.exports={ MY_变量：“value”， 另一个_变量：“blah”， } 您可以像这样在next.config.js中加载它们： const path=require（'path'）） const webpack=require（'webpack'）
这是我的next.config.js： constwithcss=require（“@zeit/next css”） const withLess=require（“@zeit/next less”） const WITHASS=require（“@zeit/next sass”） 如果（需要的类型！==“未定义”）{ require.extensions['.less']=（）=>{} } module.exports=withCSS( 没有( 带色({ LessLoader选项：{ java
是否可以以预定义的格式构造包含动态部分的路由，例如/[name]-id[id]，以使路由/bob-id303或/mary-id205 我尝试的是创建一个文件[name]-id[id].js。在getInitialPropsI控制台内部。记录ctx并包含 pathname: '/[name]-id[id]', query: { 'name]-id[id': 'bob-id303' }, asPath: '/bob-id303', 另一方面，调用文件[[name]]-id[id]].j
我不知道为什么它不起作用 当我调用router.push（{pathname:'/user/a'}）转到/pages/user/[userId].tsx它通过URL导航路由 但是我router.push（{pathname:'/user/b'}）转到/pages/user/b.tsx它通过客户端路由 我需要你的帮助 谢谢。只需将您的nextjs模块版本更新到^10.0.1即可
我只是按照官方网站的步骤： 第一步 npm install --save next react react-dom 第二步。向package.json添加脚本 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } } 第三步。 在项目中添加./pages/index.js： export default () => <div>Welcome
我正在将fastfy与next.js一起使用，我需要包括跟踪（requestId是目前的问题）。我现在正在做的是创建一个fastfyonRequest钩子，生成一个requestId值，并在request对象中设置它（也可以作为请求头）。我想要访问此请求对象的原因有两个： 在logger对象中（pino在本例中，我希望在所有自定义服务器端日志中包含requestId） 在所有需要向其他服务发出的请求中，需要在标题中包含requestId 也许我错过了一些琐碎的事情，我没有用最好的方式去做 这里是
我是NextJS新手，我正在尝试找出对数据是动态的api（即，它不断更新）进行获取api调用的最佳方法。我需要做的是： 定期调用api并检索最新文章 将这些检索到的文章添加到以前检索到的文章中 我应该注意，我不需要长期保存这些文章。我需要它们大约一到两个星期，在这一点上我可以删除它们 因此，我想知道在NextJS中实现这一点的最佳方法是什么。我是否应该将每次调用保存到数据库或数组？还有别的吗 如果您能给我提供关于如何实现这一点的任何建议，以及指向文档和/或教程的任何链接，我将不胜感激 谢谢。正如
我无法使用serverless next.js部署my Nextjs，因为构建的输出太大了。我有大约20个页面，每个页面平均14MB，对于一个lambda来说太大了（使用无服务器的next.js）。我看到的一个观察结果是，.nextjs/serverless/pages下的文件没有缩小。我还在生成的文件中看到一些不必要的样板文件。有没有办法减小文件的大小。谢谢。您是否运行下一个版本以生成生产版本？我遇到了同样的问题，但有一段时间以下内容对我有所帮助。我在serverless.yml包中添加了以下
如何使Tailwind css在nrwl/nx下一个js项目中工作？ 现在我使用的是通用方法，但失败了： [ error ] ./styles/main.css Error: Didn't get a result from child compiler 我采取的共同方法是： npx创建nx-workspace@latest我的组织 纱线添加--dev@nrwl/next nx g@nrwl/next:application my project 纱线添加tailwindcss autopre
这就是问题所在。我使用next.js和express作为前端和后端服务器。nextjs托管在Zeit Now上，express应用托管在heroku上。 如果我使用express应用程序，我可以确保它工作正常，并且与mongodb的连接也正常。 当我通过Zeit点击next.js的索引页面时，它似乎挂在GET/tasks上超过10秒。 我只调用了3个端点，从next.js应用程序的index.js获取方法。这不应该挂起整个应用程序 如果我独立访问服务器，只需不到3秒左右的时间就可以返回json数
我正在用Nextjs建立一个个人网站，我遇到了一个关于公用文件夹的奇怪问题。根据，静态图像将放在公用文件夹中。这在我的本地开发模式下适用于所有图像。然而，当我用Vercel将其推向生产时，一些图像将无法渲染（显示损坏的图像）。我注意到它似乎可以很好地加载jpg图像，但不能加载png/svg。我不使用next images模块，只使用一个简单的标记 我的文件结构（简化）为： 公开的 静止的 墨尔本.jpg 阿凡达.png 页数 index.jsx 在my index.jsx中
在Next.js生产版本中，包含页面捆绑包的持久缓存，如下所述： 但是，当我在调试模式下运行我的next.js项目时。它没有使用此功能 如何在开发模式下运行next.js，并启用页面绑定的持久缓存 我为什么需要这个： 目前，我的服务器和客户端代码是1.js应用程序的一部分，我需要能够在服务器代码中进行更改并重新运行应用程序，而无需重新构建应用程序进行生产（这非常耗时），也无需在每次刷新时等待网站加载30秒。不幸的是，如果没有“页面捆绑包的持久缓存”功能，在本例中会出现这种情况
我有一个电子商务网站，我正在使用增量静态再生来更新产品，在getstaticpath中使用fallback=true，以添加更多的[pg].json文件准备交付（分页），但随着时间的推移，我想找到一种方法来知道有多少[pg].json服务器迄今为止生成的文件 如何以编程方式进行
我尝试基于Next.js+React+Apollo制作测试SSR应用程序。 但我无法理解SSR是如何工作的 我阅读了文档，发现要在第一次SSR渲染时获得一些重要数据，我们需要使用getStaticProps，函数调用的结果将传递给我尝试渲染的组件的props 取决于这些道具，我可以渲染我想要的任何东西，例如，我有下一个代码： import React from "react"; import {GetServerSideProps, GetStaticProps} from
我正在为我的nextjs使用monorepo，并使用Thread工作区使用react本机应用程序。在我的根文件夹中运行warn install时，warn将安装根node\u modules文件夹中的所有模块。但是当我在我的nextjs应用程序中运行，Thread dev时，nextjs会生成一个新的node\u modules文件夹。我怎样才能防止这种情况？我需要改变什么才能让它工作 我的next.config.js如下所示： module.exports = { projectRoot
我们有一个网站，我们有一个错误，改变了我们的网址一堆。我们纠正了这个错误，但是我们的一些URL仍然被破坏。我们设置了404响应页面，但nginx在标题中返回500 以下是搜索控制台返回的示例之一： 我在nextjs上读到了大约404页。我是否需要构建一个静态404页面并使用Nginx做一些事情
我在生产模式下遇到了NextJS问题（在本地和Vercel上都运行） 当我进入预览模式时，NextJS预取所有可见链接（作为/\u next/data/../data file.json）中的json文件），但速度非常慢。太慢了，我从Vercel那里得到了错误504:504:GATEWAY\u TIMEOUT，因为请求被终止了 我想我错过了一些简单的东西，但我不明白它是什么。所以基本上我有两个问题： NextJS应该在预览模式下预取链接（组件上没有明确设置） 为什么首先要花这么长时间才能得到“本
有没有办法从nextjs的_error.js中的getInitialProps重定向到另一个url 已尝试res.redirect“/”；在getInitialProps内部 它的给予 TypeError:res.redirect不是一个函数尽管我觉得这个来自_error.js的重定向不合适，但您可以尝试以下方法： import Router from 'next/router' // in your getInitialProps if (res) { // server res.wri
我不熟悉next.js，正在尝试迁移一个项目。我不知道如何在页面或整个站点中包含Bootstrap.js文件。我看到了如何包含CSS而不是JavaScript。我是否只是将cdn路径添加到public index.html文件中 很难知道它是否被包括在内，因为我没有看到它出现在网络选项卡中。你应该创建一个\u app.js文件。此文件位于pages目录的根目录中。这将允许您控制应用程序范围内加载内容的所有方面 import 'bootstrap'; export default function
我们有： pages/[providerSlug]/index.ts pages/account/index.ts 当我们访问/account（无查询）时，[providerSlug]/index.ts中的此代码被命中： export const getServerSideProps = async (context) => { console.dir(context) } outputs: ... query: { providerSlug: 'null' }, r
我正试图重写类型脚本中的，但是我在使用HOC组件时遇到了问题 我的密码在这里 有什么想法吗？谢谢 任何拉取请求都是受欢迎的。我也尝试过同样的方法，只是在“为页面获取数据”上遇到了问题。TS开发缺少太多的打字。 我为页面和组件属性创建了一些接口，我发现您也有。@types/next下的类型似乎非常缺乏/不完整 也许是时候为next.js/ts编写一个全面的d.ts了？ 我在玩游戏 编辑：刚刚看到您的typeroot指向src/@types而不是@types。现在我的代码完全可以工作了，只有两个小缺
当我导航到Gallery和Contact Link时，除了单击home Link（“/”）时，我遇到以下错误 下面是我的header.js组件： import Link from 'next/link' import { COLORS, FONT_SIZE } from '../theme/constants' const Header = () => { return ( <header> <Link href='/'>
当我的应用程序使用NextJS和PrismaIO作为部署到Vercel的数据库ORM编写时，我遇到了麻烦，因为超时，我试图连接AWS RDS上托管的MYSQL数据库。一段时间后显示以下错误： 502: BAD_GATEWAY Code: NO_RESPONSE_FROM_FUNCTION ID: bom1::zrmv2-1609789429213-86b5142a230c 我已经在AWS RDS的安全组中将我的应用程序添加到Vercel的IP地址白名单中，但该应用程序仍然超时并失败，错误页面为
我的java后端创建此链接（http://127.0.0.1:8080/account/reset/finish?key=vljKlxjYh6Cd2xp119bQ）供用户单击并进入重置密码页面，以便重置密码。 我的后端api是/api/account/reset password/finish 如何将用户从next.js中的链接重定向到此api。您首先必须在nextjs应用程序的pages文件夹中创建帐户/reset/finish/index.js页面，并且每当单击链接时，路由将自动加载该页面
我不熟悉Next.js，但我决定用它为我的客户建立一个网站，而不是为了更好的搜索引擎优化和性能而做出反应 客户希望在家庭Pgae中有一个背景视频，我已经尝试了几个小时将我的视频嵌入到公用文件夹中，但由于某种原因，它不想工作，我一定错过了什么 我的代码如下所示 <video autoplay muted loop className={styles.video}> <source src="./video-1.mp4" type=&
我使用formik，当我点击一个包含onChange方法的字段时，其他已经填写的字段被删除，我发现当我点击其中一个字段时，包含在“touch”属性中的值被删除，我寻找，但我找不到任何适合我的 <Formik enableReinitialize={true} validateOnMount > {({ setFieldValue, touched, setFieldTouched, }) => ( <Input
我有一个下拉选择，它在上传到vercel时不起作用，但在dev中可以正常工作 这是我的第一个下一个项目，我认为这段代码可能比提出的问题有更多的问题，所以欢迎所有建议 在这段代码中，我使用的是localhost，因此我可以在本地处理它。上传的版本使用Vercel提供的url如果有人能建议如何为url添加OR，那就太好了！
我正在使用NextJS和TailwindCSS开发一个站点，在该站点的生产页面上有一个FOUC。它在不同的浏览器中不同程度地存在，但在桌面火狐上似乎最糟糕。您可以在此处查看： 根据我所发现的，我可能可以通过配置\u document.js文件来修复它，但我不确定如何设置它，以便与Tailwind一起工作 是否有人对如何修复此问题有任何建议，或者我可以查看一些资源，以了解如何尝试自定义文档？根据我发现，在\u document.js的正文部分开头放置0，可能有助于延迟加载样式表后的第一个可见绘图，
我已经用nextjs创建了一个网页，并使用next export创建了一个静态页面。 我想知道为什么在输出目录中会有文件大小巨大的文件（请参阅：） 如果我将页面上传到服务器并在浏览器中运行，则页面速度非常快。似乎至少-即使文件\u app.js和\u index.js存在于此目录中-它们也没有被live页面使用 但我想知道为什么它们如此巨大，如果生产不需要它们，为什么它们会在输出目录中 -- 我用“Webpack bundle Analyzer”分析了捆绑包，但仍然不知道是什么原因导致了如此大的
我正在尝试使用next auth进行凭证身份验证。我必须使用一个自定义登录页面，我绝对不能让它工作大约一整周 我有： /[…nextuth.js] 从“下一个身份验证”导入下一个身份验证； 从“下一个身份验证/提供程序”导入提供程序； 从“@api/axios”导入axios； 常量选项={ 供应商：[ 提供者。凭据({ 异步授权（凭据）{ const{data:user，status}=wait axios.post（'/users/authentication'，credentials）；
我正在将NextJS应用程序部署到Vercel，我使用样式化组件。这是我的\u document.tsx文件： import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' import flush from 'styled-jsx/server' export default class MyDocument extends Document { static async
我试图在Next.JS中学习路由，但我无法获得查询对象 文件路径：/src/pages/[test]/index.tsx import { useRouter } from 'next/router'; export default function Test() { const router = useRouter(); console.log(router.query); return ( <div> <h1>Test</h1&
我在试着联系你http://localhost:3000/nba/category-slug-3，但我一直收到404错误。http://localhost:3000/nba 工作正常，但任何鼻涕虫都不工作。我错过什么了吗？我是否需要添加/编辑其他文件？我刚开始使用NextJS。在某种程度上，我希望能够使用mongodb集合中的条目id作为slug 当您打算给页面命名时，它看起来像是您给页面命名的[slug.js]
从文档中： 自动图像优化允许在浏览器支持的情况下，以WebP等现代格式调整图像大小、优化图像并为其提供服务。这可以避免将大图像传送到具有较小视口的设备上。它还允许Next.js自动采用未来的图像格式，并将其提供给支持这些格式的浏览器 我的用例如下所示： 博客网站 博客帖子的身体图像 缩略图 这就是我到目前为止一直在做的事情（没有任何优化）： 身体图像（我只上传最大150kb的图像到我的存储） 缩略图（我限制在30kb） 我目前没有任何图像优化设置。我只是将图像上传到我的存储中，我
您似乎可以配置webpack的css加载器，将样式表中的类名从kebab case转换为camel case（参见此处） 如何配置Next.js来实现这一点 我尝试过像这样修改webpack配置，但它破坏了应用程序： module.exports = { // Modify webpack config webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { config.mod
下面是位于Pages/home.js的代码本地主机：3000/家 不能在非页面组件中使用getServerSideProps。您可以将道具从主截面传递到主截面，也可以创建上下文，以便该值可以从组件树全局可用 getServerSideProps只能从页面导出。你不能出口 它来自非页面文件 不能在非页面组件中使用getServerSideProps。您可以将道具从主截面传递到主截面，也可以创建上下文，以便该值可以从组件树全局可用 getServerSideProps只能从页面导出。你不能出口 它来
假设我的next.js react应用程序中有以下页面： //文件名：[mypath].jsx 导出默认函数MyPage（道具）{ 返回( {props.data.text} ); } 导出异步函数getServerSideProps（上下文）{ const mypath=context.params.mypath； const res=等待取数(`https://external-api/${mypath}`） const data=wait res.json（）； 返回{props:{dat
使用动态路由和查询参数时，路由器在客户端无法正常工作。 我的页面结构如下： videos.js photos.js [...userParams].js ... 我正试图通过使用 Router.push（“/videos？sort=5&page=2”，“/videos/recommended？page=2”）。 我试图导航到视频页面，但出于CEO的目的，我需要将一些参数转换为url子路径。 对于href I pass/videos，后跟params，对于as，我放置了所需的url字符串。在我添
我在Next.js中构建了一个简单的API，并使用Next auth进行身份验证 到目前为止，我必须在每个API路由中使用类似的内容： const session = await getSession({ req }); if (session) { ... do something ... } else { ... send back a 401 status } 这似乎违背了干燥原则。有没有一种聪明的方法可以将保护应用于一个地方的多个路由，例如Laravel
我正在编写一个新的Next.js应用程序，其中必须支持旧URL（我无法301重定向） 我需要支持像这样的URL 我目前有这个文件夹结构 页面文件夹->栏文件夹->[slug].js 我要走这条路吗 我需要像这样创建一个foo文件夹，然后让下一次转换来完成这项工作，还是其他方式 页面文件夹->foo文件夹->酒吧文件夹->[slug].js 您可以在next.config.js中使用，将传统URL结构指向next.js页面路径。重写仅在服务器端可用，不影响客户端路由 //next.config.j
某些css无法正常工作，例如.gjs cv画布无法正常工作 这是nextjs中我的grapejs页面的屏幕截图
将Tailwind CSS引入Next.js环境。 我想应用color.lime，但出现以下错误 ./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/tailwindcss/tai
这是密码 const [scroll, setScroll] = useState(false); useEffect(() => { window.addEventListener("scroll", () => { setScroll(window.scrollY > specify_height_you_want_to_change_after_here); }); }, []); 获取此错误 警告：无法对未安装的组件执行