我正在整理Next.js网站“学习”部分的文档。 如果使用jsx样式标记，下面的CSS不会应用于组件；但是，如果我将CSS添加为对象文字属性，就会应用它。如何获得要应用的jsx样式标记CSS 这将不适用于： import Layout from "../components/Layout"; export default function Post() { return ( <Layout> <div className="container">

我一直在按照网站上的教程构建一个小应用程序。我一直在使用基于子目录结构的全覆盖路由或嵌套路由 我将所有文件标记在/posts目录中，在/pages目录中，我希望有一些帖子所在的子目录（类别） pages/content/category-1/post1 pages/content/category-2/post2 etc 我的站点只能提供页面/content/[id].js上的内容，如果我将[…id].js作为捕获所有路由的一种方式，我会遇到以下错误： 错误：在/category/[…id]

我在我的应用程序Next.js v10.0.4中使用了一个来自antd design 4.10版的可扩展表。当我点击表中的+按钮时，它假设只打开选中的行，但我不知道为什么它同时打开所有行 这是我的表格组件： <Table size="small" dataSource={data} columns={updateColumns} expandable={{ expandedRowRender: (record) => (

我试图在下一个JS部署中使用AWS amplify环境变量，但它似乎根本没有读取它们。它们似乎是从env.local文件加载的，而不是放大 我做错什么了吗？我需要重新部署吗

我正在尝试将我的React应用程序迁移到Next.js。我一直在export const history=createBrowserHistory（）中出现以下错误 不变冲突：浏览器历史记录需要DOM configureStore.js import { createStore, combineReducers, compose, applyMiddleware } from "redux"; import { connectRouter, routerMiddleware } from "co

我的项目，部署到Vercel Nextjs站点，带有/pages/api/foo.ts 在/pages/index.tsx内部，我打了以下电话： const api = { async monthly(symbol) { const res = await fetch(`${server}/api/stocks?symbol=${symbol}`); const json = await res.json(); return json; }, }; export

拜托，你能帮我吗 我正在从事一个博客项目，其中一个要求是，即使浏览器禁用了javascript，博客也能正常工作。使用项目时“https://github.com/dionatanaraujo/rollup-styled-jsx“叉子”https://github.com/Tomekmularczyk/rollup-styled-jsx“，我们注意到当禁用浏览器javascript时，组件没有进行样式设置 如何模拟错误： 进入根项目并运行npm安装，然后运行npm运行构建：prod 进入演示项目

我的package.json文件是 { "name": "learn-starter", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build"

我想在Nextjs中基本上检测运行的环境是开发环境还是生产环境。有什么直接的方法可以做到这一点吗 if(env == "dev"){ // do something } else if (env == "prod"){ // do something } 是的，如果您通过process.env.NODE\u env访问env，这应该是现成的 当您通过next dev运行应用程序时，这将是开发 在构建应用程序并运行next start时，将此变量设置

我正在与NextJS和MongoDB合作 一切都在本地运行，我使用Vercel部署了我的站点，当我转到从数据库加载数据的页面时，控制台中出现以下错误： GET https://pandacea2-0.vercel.app/undefinedapi/contacts 404 现在，当我刷新数据时加载，但除非我刷新页面 下面是我的请求以及我的ENV变量 Contacts.getInitialProps = async () => { const res = await fetch(`${

你能帮我检查一下我的代码吗？我是否可以从cookie中获取访问令牌并通过apollo客户端发送？在我的下一个.js项目中，我使用NextAuth进行身份验证。用户登录后，我将用户信息和访问令牌保存在会话中。但我知道怎么才能拿到它，并把它交给阿波罗的客户 import { useMemo } from 'react' import { ApolloClient, ApolloLink, InMemoryCache, createHttpLink } from '@apollo/client' im

有没有办法从动态路由捕获“/”url 以下是我尝试过的： 这给了我错误404“http://localhost:3000/“而不是进入[…页面]组件。该[…页面]。tsx将仅在/s之后捕获路由。”http://localhost:3000/page1 或http://localhost:3000/page1/page2 将进入[…页].tsx 您可以从nextjs路由器中提取值 import {useRouter} from "next/router"; 然后在组件中

我正在尝试将身份验证与应用程序中的next auth库集成。我一直在遵循这里给出的官方教程。给定示例的问题是，我需要检查每个页面上是否都有这样需要身份验证的会话 从'react'导入{useState，useffect}； 从“下一个身份验证/客户端”导入{useSession} 导出默认功能页（）{ const[session，loading]=useSession（） //从受保护的路由获取内容 useffect（（）=>{ const fetchData=async（）=>{ const

我希望能够在Next.js应用程序中覆盖react bootstrap（Sass）。我在React应用程序中可以很好地使用它，但在Next.js中无法使用它。我不想在app.js中全局设置它，因为我需要在组件级别设置它。理想情况下，我希望在somename.module.scss文件中执行以下操作： @import'~bootstrap/scss/bootstrap' 然后在下面，定义我的类名以扩展引导类，如下所示： .goright { @extend .text-right; }

我有/pages/profile.js，它调用LovedOne元素，从props传递值。 调试表明，这些值在传递时是有效的 import React from "react"; import LovedOne from "../components/loved_one"; export const Profile = ({ loved_ones }) => { const [session, loading] = useSession();

我希望使用Next.js静态站点导出，但我也希望在模板中包含动态组件，这样就不必在每次更改时都进行构建，例如“导航”组件。据我所知，这似乎不可能？除了创建一个单独的客户端构建步骤外，还有其他解决方法吗？下一步是考虑使用组合静态+SSR生成的站点，但目前还没有。我目前看到一些选择： 您可以导出一个静态站点，但让该静态站点进行api调用等，这样您就可以通过api调用加载导航或其他内容。好处-没有新版本。缺点-这些链接/标记对于搜索引擎不可用，并且最初不会为用户显示 如果您使用的是CMS和CI系统（例

当我在本地开发时，当我将/public文件夹放置在/src/中时，可以找到图像： # locally ./src/public/images/ 然后，当我进行部署时，找不到映像。但当我将公用文件夹放在src之外时，会发现图像： # deploy ./public/images/ ./src/ 我将这些图像用作： <img src="/images/my-image.jpg" alt="" /> 公用文件夹必须位于根目录中。否则无法进行配置 然后，您的代码可以从基本URL（/）开

我试图通过在next-i18next包中更改站点的子路径来改变语言，我在互联网上（，）搜索这个问题的答案，但没有成功。更改url中的子路径后，它将被复制，并将我重定向到不存在的页面 我的代码： //我的项目路径/i18n.js const NextI18Next=require（'next-i18next'）。默认值； const i18nextBrowserLanguageDetector=require（'i18next-browser-languagedetector'）。默认值； co

下面这句话我们大家都很熟悉：不应该使用getInitialProps，而应该使用getServerSideProps。 我已经使用getInitialProps构建了我的应用程序，现在我面临以下问题：“我应该将getInitialProps替换为getServerSideProps吗？”，如果是这样，我应该如何以正确的方式操作而不损坏我的应用程序 今天，我在几个重要的地方使用getInitialProps： 在我的自定义\u app.js中，对于react redux： 类MyApp扩展了应用程

我遇到了一个奇怪的问题。我使用NextJS的服务器端渲染功能，并使用ReactQuill作为我的富文本编辑器。为了绕过ReactQuill与DOM的关联，我将动态导入它。然而，这带来了另一个问题，即当我试图访问我通过锚链接导入ReactQuill的组件时，该组件不起作用，但我可以通过手动点击路径来访问它。这是我的目录概览 components/ crud/ BlogCreate.js pages/ admin/ crud/ blog.js index.

我正在使用nextjs，我试图在postsss.config.js中包含@fullhuman/postsss purgecss插件，但是，它引发了我的错误-在plugins[0]中找到了无效的postsss插件 这是postss.config.js- const { getPlugins } = require('tachyons-build-css'); const purgecss = require('@fullhuman/postcss-purgecss'); const cssOpts

我正在尝试使用新的内置image组件将图像插入到我的Next.js v.10应用程序中 代码如下： import * as React from "react"; import Image from "next/image"; export const TestImage = () => { return ( <Image src="/images/dummy-rectangle-image.png"

我目前正在将一个应用程序从CRA迁移到Next.js。在使用CRA时，Eslint工作得非常出色（Eslint是现成的） 我想在Next.js应用程序中使用相同的CRA linting规则，因此我安装了eslint config react app。我按照NPM页面上提供的说明进行操作： npm安装--保存dev eslint config react app@typescript eslint/eslint plugin@^4.0.0@typescript eslint/parser@^4.0

我试图在我的一个页面中获取环境变量，但它总是返回未定义的。我在访问api文件夹中的变量时没有问题，但是在pages/page.tsx中它不会返回变量 我使用 const SECRET=process.env.SECRET来自我的.env文件 如何解决此问题？我认为实现您尝试执行的操作的首选方法是在服务器端的getServerSideProps（）/getStaticProps（）方法中使用env变量。这应该像预期的那样工作，没有任何技巧 但是，如果您想访问客户端上的env变量，则必须在变量前面加

我想从服务器端获取用户会话（getServerSideProps）。现在我正在使用passportjs中间件模式，然后在API端获取用户对象。passport中是否有允许我这样做的函数或方法

下面的错误 服务器错误 ReferenceError:未定义窗口 生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。 来源 wowjs/dist/wow.js（1:0）@eval 1 | module.exports=require（“wowjs/dist/wow.js”）； 大宗报价 请问，我做错了什么？根据我在你的帖子中看到的，问题在于wow.js包本身，而不是你的代码。useffect仅在客户端执行，因此访问窗口不存在问题。这是从“wowjs/dist/WOW.js”导入WOW的这

我有一个Next.js API路由，它需要访问本地文件，但在API路由中使用它时，没有定义_dirname 是否可以从下一个路由中获取当前目录？要访问根目录或任何目录，可以使用Next.config.js设置网页包别名。例如： // Inside next.config.js module.exports = { webpack: (config) => { config.resolve.alias = { ...config.resolve.alias,

知道如何在componentwillunmount上的nextjs中从dom中删除元素吗？ 我使用Head组件加载一个JS脚本，该脚本在页面上生成一个元素。 当我导航到另一个页面时，该元素仍然保留，因此我需要删除它。 我曾想过使用componentwillunmount和document.getelementbyclassname，但由于某些原因，它在nextjs中不起作用 有没有关于如何解决这个问题的想法 这没有任何作用，即使正在按下按钮： componentDidMount() {

我有几个动态页面，它们使用完全相同的getstaticpath，并且在getStaticProps中调用完全相同的数据库请求。如何缓存数据库请求的结果，以便在构建不同页面时可以重用它们？我曾尝试添加基本的内存回忆录，但似乎效果不大。我的猜测是，页面可能在不同的worker中呈现，它们不共享内存。如果您有繁重的计算/请求，您可以制作一个助手，从数据库获取数据并将结果存储在临时文件中。因此，您可以检查此文件是创建的，然后读取它，还是第一个请求，需要从数据库中提取数据。与传统缓存（redis、memc

我正在nextjs中建立一个项目。我想为这个项目添加一些全局元标记和标题。我在\u app.tsx中使用了next/Head中的Head组件，但它们在本地主机和使用vercel部署时都在主体中而不是在主体中呈现。我以前用过next，不记得遇到过这个问题 这是我的\u app.tsx import { AppProps } from 'next/app' import Head from 'next/head' import Footer from '../components/footer'

请参阅附件，它显示了文件夹结构，以及我尝试获取api时遇到的“404”错误。当我通过postman运行相同的api时，它工作得很好。但是在nextjs生态系统中，我得到了一个404。是否存在配置问题？可能我缺少配置 来自文档 注意：不应使用fetch（）在getServerSideProps中调用API路由。相反，直接导入API路由中使用的逻辑。对于这种方法，您可能需要稍微重构代码。 从外部API获取是可以的 运行下一次生成时是否出现此错误？

我正在努力在我的NextJS应用程序中加载我的.env文件。这是我的密码： 我的.env位于根/ 我的index.js位于/pages/index.js 这是我的index.js： require("dotenv").config({ path: __dirname + '/../.env' }) import React, {Component} from 'react' import Layout from '../components/layout' import axios from

从客户端，我需要使用一些api。这些api应该读/写json数据源文件。此json不能从url中获得。它必须只能从文件系统访问 此JSON不包含任何环境变量，可以根据用户交互动态编程创建。因此，无法使用webpack的EnvironmentPlugin在重建时刷新它 这个JSON非常简单，使用数据库似乎太过分了 从文档中，我无法确定将此数据源文件放在何处以及如何访问它 Next.js仅公开可从internet访问的public/statics文件夹 只需在这些文件夹之外创建一个文件夹，它将无法从

我正在我的一个页面中使用以下代码： export async function getServerSideProps(context) { const session = await getSession(context) return { props: { session } } } 会话将返回null。我得到以下错误： [next-auth][error][client_fetch_error] [ 'http://localhost:3000/api/auth/s

我得到了这个NextjsAPI，它返回： res.status(200).json({ result: result }) 结果是： const result = { "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9", 'expiry_date': 123132 } 我正在用npm http proxyproxyRes截取响应： function interceptLoginR

下一个翻译是显示key而不是lang 通用：菜单1.标题通用：阅读更多信息 i18n.js module.exports={ 地区：['en'，'de'，'cs']， defaultLocale:'en'， 重定向到DefaultLang：是的， 页码：{ “*”：[“通用”]， “/404”：[“家”]， “/”：[“家”]， '/about'：['about']， }, 插值：{ 前缀：“${”， 后缀：'}'， }, 是的， logBuild：是的， loadLocaleFrom：（区域设

我用next.js制作了一个应用程序，当我创建这个构建时，我的网站的javascript刚刚停止工作，这会是什么呢

我在谷歌上搜索了很多关于这个问题的信息。 我正在使用React+Next.js V9和google搜索控制台进行搜索引擎优化 谷歌只索引我的网站主页。 我想这是因为它是动态路由的。 我将Next.js升级到9版，改变了文件夹结构，因为我认为它可以轻松地动态路由，而无需在服务器端工作，并且可以由谷歌索引。然而，一切都没有改变。仅谷歌索引主页。（index.js） 我在下面添加我的代码。 如果你有什么想法，请给我一些建议。 多谢各位 文件夹结构 ├── _app.js ├── _document.j

我在库中使用next.js 要初始化该库，我需要使用async/await从Vault中获取一个秘密，但我得到一个Promise{} 我本以为以下方法会奏效： //utils/auth0.js 从'@auth0/nextjs-auth0'导入{initAuth0}； 常数保险库=需要（'./保险库'）； 异步函数getSecretFromVault（）{ const res=await vault.fetchSecret（）； console.log（res）；//正确显示我的秘密 返回res；

我正在开发一个由静态站点生成器支持的网站，该生成器将构建大约100K个静态HTML页面。目前，我的工作流正在本地机器上构建项目，并使用FTP工具将输出文件夹（约40G）从本地机器上载到远程生产服务器，这是一个漫长而痛苦的上载过程，可能需要24小时左右 我想知道是否有一种推荐的方法可以建立一个更好的构建和部署过程，使其更快、更自动化？由于页面数量非常多，构建时间一直是静态站点生成器的关键。解决方案是将生成某些页面的时间从构建时间推迟到请求时间 例如，您只能在构建时请求最多的前10000个，以保持较

我正在努力通过链接传递我的itemID和slug 这可能吗 <Link href={{pathname: `/products/[slug]`, query: { id: item.itemID }}} as={`/products/${slug}`}> ``` ```

我有一个导出getServerSideProps的页面。我想知道的是，在同一会话中重新访问页面时，如何禁止该页面重新获取服务器端道具并使用缓存道具（例如，单击远离页面的链接，然后单击返回到同一页面） 现在重新访问页面的速度很慢，而且我得到了不必要的服务器通信。我使用Apollo，当我不使用服务器端道具时，所有数据都是从缓存中提供的，而且速度很快

我有一个电子商务网站，我试图找出如何最好地处理个人产品页面。我希望尽可能多的静态生成的产品，我知道我可以使用静态生成的大部分网页，但我关心的部分是，用户有最新的知识，该产品是否有库存 我知道我可以使用revalidate来确保产品信息是最新的，我可能会将其设置为24小时左右，因为这些信息很少发生变化，但我不想将其设置为仅一分钟，因为我只关心最新的库存信息 我觉得处理这个问题的最好方法是结合使用静态生成和客户端抓取。我会提供所有的产品信息使用静态生成，除了股票，我可以获取客户端。我还可以在24小时

我仍在学习React，并在下一个JS工作横幅上工作。我不明白为什么这个addBanner组件没有显示在服务器上，也没有显示任何文本。你觉得我该怎么办？谢谢大家! 链接到codesandbox上的问题：我找到了解决方案，我忘了给我的组件的第一个字母加大写字母，给图像加上宽度和高度。：）

我正试图在用Next.js构建的网站上的html中设置open graph meta标记，由于某些原因，该图像从未被找到。他们在Facebook、Twitter和WhatsApp上工作很好，但在LinkedIn上不行。我还注意到它在不和谐的环境中工作 这是我的代码，包装在Next中的元素中 <meta property='og:image' content='https://steelpoll.com/images/steelpoll.png' /> <meta propert

错误描述 你好，我是新来的普里斯玛。我一直在尝试使用nextjs访问Prisma数据库。每次我试图在nextjs页面中使用@prisma/client中的PrismaClient时，我都会看到这个错误 ./node_modules/@prisma/client/runtime/index.js:26236:39 未找到模块：无法解析“异步\u挂钩” 空的 如何繁殖 复制行为的步骤： 我的模式文件 datasource db { provider = "mysql" url =

我正在尝试一种将react intl与NextJS集成的新方法。我对官方回购的例子有很多问题。基本的翻译工作。但每当我浏览到带有德语翻译的页面时，我都会看到以下错误： Error: [@formatjs/intl Error MISSING_DATA] Missing locale data for locale: "de" in Intl.DateTimeFormat. Using default locale: "en" as fallback. Se

我试图将一个函数从依赖项导入到下一个/react函数组件，但不知何故，我一直遇到以下错误： SyntaxError:意外标记“导出” 这就是我试图导入的函数： export function classes(...args) { const list = []; for (let i = 0; i < args.length; i++) { const entry = args[i]; if (typeof entry === "s

我有一个编辑页面，该页面将使用id参数呈现，在应用程序运行时工作正常，但在构建nextjs应用程序时，我遇到了这个错误 [错误：eNote:没有这样的文件或目录，重命名为'C:\Users\Ahsan Nisar\Documents\GitHub\customer portal\frontend.next\export\en\Companys\edit[id].html'->'C:\Users\Ahsan Nisar\Documents\GitHub\customer portal\fronte

SSR的样式化组件需要使用特殊插件进行传输，例如（babel插件样式化组件或typescript插件样式化组件） 使用so，它将确定性组件ID添加到每个组件中，以避免类名冲突，从而避免类名不匹配等问题 NextJS应用程序中的my babel.config.json设置为 { "presets": ["next/babel"], "plugins": [["styled-components", { &qu