Next.js Nextjs字体SSR

我在SSR(Nextjs)上注入字体时遇到了问题,正如您从图像中看到的,页面加载时没有特定的字体(在我的例子中是Segoe,我在项目中本地存储),浏览器用一些默认字体替换它。这感觉就像文字在跳跃)所以我的问题是:是否有可能加载带有所需字体的页面。 这是我的密码 字体文件样式。ts: export default ` @font-face { font-display: swap; font-weight: normal; font-family: '

WebSocket握手时出错:意外响应代码:200-Next.js、Gun.js、ZEIT Now

我现在通过ZEIT获得了一个Gun.js+Next.js应用程序(源代码),我从Chrome和Safari中得到了以下错误: WebSocket connection to 'wss://maptivist.randymorantes.now.sh/' failed: Error during WebSocket handshake: Unexpected response code: 200 从Firefox我得到: Firefox can’t establish a connection

包含unicode文件名(非ascii)的文件的Next.js抛出404错误

位于公用目录下的文件(静态)。 字母表文件名可以,但unicode(非ascii)文件名或路径总是出现404错误 不管文件夹中是否有文件。 这有什么问题???可能重复。看,这回答了你的问题吗?不,没有。没有。Url已经由urlencode编码,正如我在问题中所示(显示的Url)。但不知何故,next.js无法正确地提供该文件。我不知道为什么。我也有这个问题。你找到解决办法了吗,@Lucas1027?

Serverless-next.js主页(index.js)返回一个空白页面

我想知道是否有人面临或曾经面临过这个问题。我使用的是“serverless next.js”:“^1.14.0”,当我部署我的网站时,除了主页(index.js)外,每个页面都会加载 我得到了一个完整的空白页,没有任何错误 如果我将index.js重命名为另一个名称,那么路径将正确加载 我没有任何错误日志可显示,因为它实际上不返回任何内容。我发现无服务器下一步。js@1.14.0与最新的Next.JS(>9.5.4)不兼容 在问题解决之前,我不得不将我的NextJS版本降级到9.4.4。 我已经

Next.js 如何使用嵌套的动态路由生成静态页面

我一直在这个网站上工作,我碰到了一堵墙。基本上,我应该按类型列出电影,从数据库中获取。这一类型应该会让我进入另一个基于该类型的列表。一旦用户点击“动作”类型的电影,它会将他们带到另一个页面上的电影详细信息。 这就是结构 Movies/ [moviesbygenrelist]/list 在那之前一切都正常 转到第二个动态页面,我无法获取第一个和第二个动态页面的值 如下 Movies/ [moviesbygenrelist]/[movie-slug] 我正在静态生成站点 如何在第二个动态页面上获

是否可以使用API路由在Next.JS getStaticProps/GetStaticPath中构建页面?

我正在使用MongoDB制作静态Next.JS应用程序 在我的静态Next.JS应用程序中,我可以使用api路由构建页面吗?例如,在getStaticProps中使用GET方法获取产品?或者这是一个糟糕的方法 现在我使用文档中的经典方式(直接调用db,如find等) 提前谢谢你的帮助 您可能可以,但在getStaticProps/getStaticPaths中使用API路由是一种不好的做法 您不应该从getStaticProps获取API路由,相反,您可以直接在getStaticProps中编写

Next.js 使用Nextjs在Netlify上部署故事书

我正在尝试在Netlify上部署我的故事书,我正在使用Next.js框架,但每次都失败了,我不知道出了什么问题 Netlify配置: 构建命令:npm运行构建故事书 发布目录:storybook static My package.json: { "homepage": "https://github.com/alexCoding42/tailwind-storybook", "name": "tailwind-sto

Next.js 帧运动、样式化组件和nextjs链接组件未设置动画

创建帧运动时样式化组件链接样式化(motion.a)`,如果它是nextjs链接组件的子组件,则无法在其上触发动画 nextjs链接文档: 如果链接的子级是功能组件,则除了使用 passHref,必须将组件包装在React.forwardRef中 沙盒表示3种情况,只有一种触发动画,即我不将ref属性传递给已设置样式的运动链接组件的情况 这是预期的行为吗?如果是,请解释为什么会发生这种情况?这个问题已在framer motion 4.1.16

Next.js 如何解决NextJs错误:未能加载/加载组件

我通过npx-create-next-app初始化了一个NextJs应用程序(v10.2.0),并在pages文件夹的index.js文件中的下面的代码中进行了重新编译。 我试图从json文件中获取数据,然后将其作为道具传递给页面组件 import fs from 'fs/promises'; import path from 'path'; function Home(props) { const { products } = props; return ( <ul&

Next.js 重用nextjs pages文件夹中的模板

假设我的/pages文件夹中有以下文件。如果我想对猫/[蛞蝓]和狗/[蛞蝓]路线(但不是鱼)使用完全相同的模板,我会怎么做?现在我有文件的副本 index.js cats.js dogs.js fish.js /cats [slug].js /dogs [slug].js /fish [slug].js 您可以在components文件夹中定义一个组件,然后从那里使用它 components/Animal.jsx co

Next.js 9导入第三方插件css

我想在我的一个组件中使用owl.carousel插件,但我不想在\u app.js中全局导入owl.carousel.css,因为插件css文件很大,我只想在将使用它的组件中导入,而不是在所有页面中导入 有没有办法使用NEXT.JS 9内置css支持将其导入到我的一个组件中?对于这种情况,NEXT.JS似乎没有内置css支持 您可以在组件中添加常规的样式表 const Foo = () => ( <div> <link href="owl.car

Next.js:getStaticProps和GetStaticPath,具有生成静态文件的动态路由

我发现这个问题有点模棱两可。给定一个特许经营列表,我希望在构建时呈现相关的特许经营详细信息页面,以避免在运行时碰到CMS/API,因为这些页面不会经常更改 但是,即使相关页面是在构建时使用getstaticpath生成的,它们仍然需要在运行时执行getStaticProps中的调用。这违背了生成静态页面的目的 import {withLayout} from '../../components/layout'; import {getFranchises} from '../api/franch

Next.js next-i18next部署在AWS CloudFront中跟踪错误eNONT:没有这样的文件或目录,scandir'/var/task/public/static/';

这使用next-i18next模块。在我的本地服务器上,这工作正常!对于多语言应用程序。 问题是当我将此应用程序作为无服务器应用程序部署到CloudFront时。 在我的CloudWatch日志中,我可以看到: da9949dd-1822-4d5c-b0d3-aeb56b6468ee ERROR Invoke Error { "errorType": "Error", "errorMessage": &

Next.js AWS Amplify-没有基于容器的托管选项

我正试图在Amplify上安装一个Next.js应用程序,该应用程序基于Fargate上的容器托管,但当我运行Amplify添加托管时,我得到的仅有两个选项是Amplify控制台和CloudFront+S3 我已经将该项目配置为启用基于容器的部署,但我没有这样做的选项 Amplify CLI版本为v4.41.2,并且在活动插件中正确列出了承载容器的插件 地区是eu-west-1,配置了CLI,我不止一次地完成了所有步骤 amplify init amplify configure proj

Next.js 使用Okta身份验证进行下一次身份验证时出错

我在使用next auth和Okta作为提供程序时遇到错误。它会将我重定向回我的应用程序,但我会看到一个页面,上面写着“尝试使用其他帐户登录”,并重定向到“api/auth/signin?error=Callback” 使用next auth的调试器在终端中遇到的错误是: [next-auth][debug][oauth_callback_protection] Comparing received and expected state { state: 'b3ef7bf3d4a5aa8f5

Next.js 我的nextjs应用程序中没有index.html文件。Netlify没有';我不喜欢那样

Netlify不允许您部署网站,除非有index.html文件。当我创建下一个应用程序时,Nextjs没有给我设置一个。有人知道如何解决这个问题吗?Background 在Netlify上部署Next.js有两种主要方式:作为静态网站或使用Netlify上的Next 默认情况下,Netlify部署静态网站,Next.js是动态的。Next.js需要一个服务器。当您运行npm运行build来构建Next.js时,实际上并没有创建HTML页面。相反,您正在创建Next.js服务器将为访问者提供的生产

为什么预取不适用于<;链接>;在Next.js中的组件?

我读了很多博客,每个人都提到Next.js会预取链接,但它对我不起作用 这是我的chrome网络标签: 这是我尝试过的代码: 从“下一个/链接”导入链接 导出默认函数Home(){ 返回( ) } Next.js在开发模式下不预取页面,预取是一项仅用于生产的功能 尝试在生产模式下运行应用程序 npm运行构建和npm运行启动 @juliomalves我添加了我的代码片段

Vercel在Next.js中的SSR期间使用什么时区?

Vercel在Next.js中的SSR和静态渲染期间使用什么时区 第二个问题: 你如何改变它 在我的实验中,即使区域设置为波特兰,它看起来也是UTC。您不能更改在Vercel上构建应用程序的时区。你能分享一下你想要实现的目标吗?一般来说,您可能不想使用CI文件系统的时间。@leerob我将ISG与Apollo一起使用。页面加载时,Apollo缓存在静态生成期间使用数据初始化。页面向API发送类似“fromTime”和“toTIme”的内容。如果在静态生成和页面加载期间使用的参数不匹配,则会出现缓

如何为Next.js安装语义用户界面

我这里有一个问题,解决不了。我想通过npm在Next.js应用程序上安装语义ui,但这是不可能的,请帮助我 如果你有一些想法,请帮助我 npm install semantic-ui 我尝试了这个,但没有任何改变。我在下一个.js项目中使用了语义ui react,我喜欢使用自己的主题。按照下面的说明开始 首先运行npm安装--保存dev语义ui。很快,您将看到一个交互式提示。回答以下问题 设置语义UI—选择“Express(设置组件和输出文件夹)” 我们检测到您正在使用NPM Nice!这是

Next.js 在Next中导入样式会引发以下基本使用示例错误

按照关于使用Sass的真正基本用法指南,我发现以下错误: ./assets/styles.scss ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema. 我还尝试了nextless(使用Ant设计)和基本nextCSS包,但结果是一样的 ./assets/styles.less Va

Next.js 有没有办法将ID和Slug从getstaticpath传递到getStaticProps[nextjs]

我想在我的next.js应用程序中将我的URL设置为slug,但还需要将itemID传递给getStaticProps,以便从API中获取所需的数据 如何将ID和slug从GetStaticPath传递到getStaticProps,而不是一个或另一个 export async function getStaticPaths() { const paths = items.map(item => ( { params: { id: item.itemID }} ))

Next.js 在Tailwind modals中未打开输入类型文件

我的问题可能太明显了,但我不知道是什么错了。我尝试使用来自tailwind ui组件的模式,并在其上添加了文件类型的输入 当我打开模式时,一切都很好,但是当我点击输入选择一个文件时,什么都没有发生(我的文件浏览器没有显示) 你知道我应该改变什么吗 这是我的Modal.js <Transition.Root show={show} as={Fragment}> <Dialog as='div' static className='fixed z-10

Next.js Heroku:内容安全策略错误阻止加载应用程序

我有一个next.js应用程序,我正试图部署到heroku。但是在构建“成功”之后,我得到了这个错误 hillfinder.herokuapp.com/:1拒绝加载映像 '数据:图像/png;base64,XXXXX'因为它违反了以下内容 内容安全策略指令:“默认src‘无’”。注意 未显式设置“img src”,因此将“default src”用作 撤退 hillfinder.herokuapp.com/:1未能加载资源:服务器 响应状态为500(内部服务器错误) 这很奇怪,因为我头上的标签上

Next.js动态路由不适用于生成版本

在服务器中构建和部署next.js动态路由时,该路由不起作用 我的next.config.js如下所示 const withPlugins = require('next-compose-plugins'); const withSass = require('@zeit/next-sass'); const withImages = require('next-images'); const nextSettings = { exportTrailingSlash: true,

Next.js 头部部分在下一个js上更新,在源代码中不可见

我正在为我的网站使用Next js,并在每个页面上添加了SEO的标题部分 这是我所有博客页面的代码。我已经导入了withRouter,以便我可以在头部使用router const head = () => { <Head> <title>Mental health blogs | {APP_NAME}</title> <meta name="description"

Next.js pretty seo url传递查询参数

我有一个产品页面,路径为product/[id]/index.js。我想“美化”的搜索引擎优化目的的产品网址。我希望url看起来像product/usb鼠标黑色而不是product/121122-001我需要传递查询ID来填充产品详细信息 slug=usb鼠标黑色 <Link as={`/reservas/${slug}`} href={{pathname: `/product/[id]`, query: {id: idkey}}}> <Button disable

Next.js vercel.json中存在问题设置安全标头

我不知道为什么文档在这方面含糊不清,但我正在尝试设置安全头,这很好,除非我想允许某些域,只是不起作用。在控制台中获取错误 "headers": [ { "key": "Content-Security-Policy", "value": "default-src 'self' *.myDomain.com; img-src 'self' data:

Next.js 如何在动态路由中指定可选参数?

假设我有一个页面,显示书中每一章的细节。用户可以从该页面导航到其他章节,因为屏幕侧边栏中有章节按钮,主要内容显示章节的详细信息 现在,用户将从书籍列表导航到该页面。在信息页面,没有那本书的章节信息 现在,如果URL是\bookSlug,那么页面将显示第一章的详细信息,即使URL中没有提到它,它也将获取章节列表,然后从该列表中获取第一章的详细信息。对于URL\bookSlug\firstchapterslaug,此行为保持不变 所以,在react router中,我经常这样做 <Route

Next.js NextJS:如何将SSG与多语言一起使用?

目前我正在使用SSG,这是完美的。但我希望我的网站支持多语言。我尝试了next-18next,但它现在不支持SSG 我正在考虑使用本地子路径(例如domain.com和domain.com/es),但我无法想象如何生成一组新语言的静态html页面 有人知道吗

Next.js 如何通过多个getStaticProps调用共享数据?

如果我正在构建一个包含大量页面的Next.js静态站点,例如100000页。我如何限制用于生成这些api的api调用的数量 例如,如果这些页面中的每一个都需要调用外部API来获取每个页面的唯一映像路径,那么如何避免调用外部API 我可以提前获取所有映像路径,但是如何跨getStaticProps的多个调用将这些路径存储在作用域中 我知道这可以在GetStaticPath中完成,但这似乎是一种反模式?恐怕没有内置的方法来实现这一点。您需要按照所述设置自己的缓存策略。

在Next.js中使用openGraph进行下一次搜索引擎优化

我正试图使用next.js中的next SEO来定制我网站的SEO 一切看起来都很好,除了在Facebook上共享链接时没有渲染图像 使用Facebook开发者调试器时,我收到以下错误消息: 推断属性 即使可以从其他标记推断出值,也应显式提供“og:image”属性 这是我的openGraph配置: title:“此处的站点标题”, description:`Site description here`, openGraph:{ 键入:“网站”, 区域设置:“fr_fr”, url:“此处的u

Next.js Next JS Slug Page赢得了vercel部署工作

我用NextJS创建了一个网站,并将其部署在Vercel上 从url:如果我单击第一篇文章。页面加载没有任何问题。 但是,如果我直接用slug页面输入url:我会得到500个内部服务器错误 我的产品构建中没有这个错误 以下是我的slug页面代码: import ReactHtmlParser from 'react-html-parser'; import Layout from '../../components/Layout'; import { API_URL } from '../../

在next.js项目中使用可公开访问的.css文件

是否可以将.css文件作为next.js项目的一部分托管?我需要通过URL直接访问.css文件,例如https://website.com/style.css。我想我必须把它放在public文件夹中,然后访问它。如果是,怎么做?这是最好的方法吗?是的。您应该将文件放入公用文件夹以便访问。查看nextjs文档了解更多信息

Next.js 打一个「;“回去”;下一步中的按钮

如何使用Next.js制作“返回”按钮?“下一个/路由器”似乎不支持返回 <Button onClick={() => Router.BACK()}>Back</Button> Router.BACK()}>BACK Router.back()}>back你可以使用Router.back()或者你甚至可以调用window.history.back()我在哪里可以找到“next/Router”的引用?我在哪里可以找到“next/Router”的引用?@JimJin你

Next.js 如何在nextjs的this.props中获取历史记录和匹配?

我想获得历史的价值,并在这个.props中匹配。我正在使用next/router导入withRouter。我想使用this.props.match.params获取url和历史记录中的值。按重定向。如何在Next.js中获取此信息。现在我没有在这个.props中获取历史记录和匹配。下一个/router没有像react dom router那样提供历史记录,它在组件的props中提供了一种称为查询的东西 这是官方的 从“下一个/路由器”导入{useRouter} const Post=()=>{

将CSS重置文件应用于Next.js页面

我知道这种注入CSS的方法: import Head from 'next/head' export default function Home() { return ( <div className="container"> <style jsx global>{` body { margin: 0; } `}</style>

Next.js NextJS assetPrefix和basePath前缀未生效

我试图创建一个简单的NextJS站点,在所有链接上都有/app前缀,但没有成功。因此,在主页上(有一个链接到/about),about链接应该以/app/about结尾 (根据下面的评论更新)我的next.config.js文件如下所示: module.exports = { assetPrefix: "/app", publicRuntimeConfig: { basePath: "/app", }, basePath: &quo

无法在Next.js中使用opencv4nodejs

opencv4nodejs模块工作正常,但当我将其与next.js集成时,它显示了以下错误-- 当我单独运行OpenCV部件时,它工作正常,但当我在index.js中导入它时,它会显示一个错误。有人能帮我解决这个问题吗 Error in ./utils Module not found: Error: Can't resolve 'child_process' in '/Users/yathartharora/Certificate/node_modules/opencv-build/build

如何在next.js中创建专用路由?

我想包装我的整个应用程序,使其无法访问,除非用户登录。如果用户没有登录,我设法将用户重定向到登录页面,但是,在重定向发生之前,我仍然看到私有路由的闪光。如何避免这种情况?因为NextJS是服务器端呈现的,所以您需要使用getServerSideProps检查身份验证,或者在重定向之前在前端显示加载指示器 检查客户端的身份验证 创建一个包装器组件并将其放入\u app.js文件中。通过在用户仍在进行身份验证时显示加载组件,可以防止显示专用仪表板。注意:因为Next.js是服务器端呈现的,所以HTM

Next.js Shopify CLI页面大小太大?

我正在开发shopify应用程序,我正在使用shopify推荐的shopify应用程序CLI来创建和提供应用程序。我发现每个页面的页面大小都太大了。我附上一个截图供参考 这非常烦人,并且使得开发非常缓慢。这是预期的,我是否遗漏了什么,是否有任何配置需要更新 继续进一步调查,我从shopify cli创建了一个简单的节点应用程序,没有添加任何个人代码,只是shopify cli创建的普通裸体应用程序,在我的开发商店中提供此应用程序时,我仍然会遇到大量页面大小,导致加载页面的时间延迟(页面大小过大

Next.js NextJS GetStaticProps和GetStaticPath身份验证

我正在使用NextJS,我有一个疑问 我的应用程序有这样一个页面 /supperter/[id] 我必须通过身份验证才能呈现它 我做了所有的auth部分,除了这个页面,它对我所有的其他页面都非常有效,因为我没有机会访问设置为访问后端的cookie export async function getStaticPaths() { const resProducts = await fetch(`${process.env.PRIVATE_ENDPOINT}/developers`, {

使用Next.js如何在SSR期间向body或_nextdiv添加类?

我有一个用例,在这个用例中,我必须向根元素添加一个类,它可能是body,也可能是SSR中的next。需要根据getInitialProps响应有条件/动态地添加该类。 我想知道在Next.js的当前状态下是否可以这样做 从“React”导入React; 从“next/document”导入NextDocument,{Html,Head,Main,NextScript}; 类文档扩展了下一个文档{ 静态异步getInitialProps(ctx){ const initialProps=wait

Next.js 是否为NextJS中的所有页面设置默认标题?

能否为NextJS中的Head组件设置一个默认值,其他页面将从中扩展 在我的情况下,我需要在每个页面上加载字体: <Head> <link href="path-to-font" rel="stylesheet" /> </Head> 我可以用自定义文档文件来实现这一点,但是Head的默认值似乎更简单 如果标题不需要经常更改,可以采用自定义文档方法。但是,如果您希望事物是动态的,比如不同页面的不同标题,我建

Next.js 如何在chakra ui中定制盒子大小?

我想在chakra ui中自定义全局样式,以便将我的所有元素框大小更改为边框框! 这是对我的审判。但是什么也没发生 import { extendTheme } from '@chakra-ui/react'; const overrides: object = { styles: { global: { '*': { boxSizing: 'border-box', }, }, }, }; export default ex

Next.js 下一个Js:URL正在更改,但页面为空

我是新来的。每当我点击链接时,它都会更新URL,但页面不会显示任何数据。但元素数据是存在的 以下是导航文件的代码: 我更新了问题。数据存在于“Elements”chrome开发工具中,但未显示在页面上要澄清的是,当您单击导航中的“Blog”链接时,浏览器将导航到/Blog页面,但您无法看到Blog标题?你能分享你的页面文件夹结构吗?是的,没错。我如何在这里分享照片?还有一件事,更多的主页工作正常,只有博客、服务等其他页面没有显示。我再次更新了这个问题。你是否应用了一些CSS来隐藏一些元素

Next.js 在NextJs SSR中操作DOM onClick

我正在尝试使用SSR在NextJS上运行一个简单的DOM脚本。 我知道DOM不能与SSR一起使用,并且我在变量“menu”上收到一个未定义的错误 只是想知道是否有人可以澄清这一点,我将如何使用挂钩?我不熟悉React和NextJS,但仍然没有完全掌握挂钩 <div className={styles.menuCon} onClick={menu()} > <div></div> <div></div> <div><

Next.js 如何在部署到Vercel的下一个js中禁用目录列表

我已经部署了内置于Next.js的网站,显然,当你部署下一个js应用程序时,你可以找到我感觉不太好的所有静态文件和资源的目录 目录是这样生成的:mydomain.com/\u next/static在我的例子中https://www.ovanya.com/_next/static/ 这是目录: 下一个问题是: 为了防止显示目录列表页面,请添加一个索引文件,如index.html,它将在访问目录路径时显示该文件 但我真的不明白应该将index.html文件添加到哪个目录?那么我应该把index.

Next.js 在nextjs中使用多个插件

我想在下一个js中使用多个配置,使用: constwithimages=require('next-images'); constwithplugins=require('next-compose-plugins'); 常数{ 阶段\开发\服务器, 生产和建造阶段, }=require('next/constants') module.exports=withPlugins([ [withImages(),//第一个插件 ()=>(相位)=>{///秒 //在开发模式“next dev”或“n

我可以用Next.js静态站点生成生成图像吗

我正在用Next.js静态站点生成创建我的博客 我将文章作为标记文件编写,标记组件通过getstaticpath返回标记文件列表来接收每个文件 我想用ImageMagick从markdown生成OGP图像 我可以用Next.js导出图像吗,比如getstaticpath?嗨,你可以添加一些代码吗?为什么加载URL并使用ImageMagick生成它迄今为止还没有奏效?我想只使用静态文件部署我的网站,因为它很容易部署和迁移到其他服务器。

  1    2   3   4   5   6  ... 下一页 最后一页 共 8 页