Next.js是服务器呈现的React应用程序的简约框架。
如何在 NextJS 中将 svgr 与 webpack 和 TypeScript 一起使用
我将 svg 文件存储在单独的文件中。我想将它们加载到 React 中并用作 React 组件，如下所示： 从 '@/components/editor/icons/add-column-after.svg' 导入 SampleIcon； 我有 svg 文件存储在单独的文件中。我想将它们加载到 React 中并用作 React 组件，如下所示： import SampleIcon from '@/components/editor/icons/add-column-after.svg'; <SampleIcon className="my-icon" /> 我安装了svgr并在next.config.js中使用，如下： webpack: (config) => { // SVG // Grab the existing rule that handles SVG imports const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg') ); config.module.rules.push( // Reapply the existing rule, but only for svg imports ending in ?url { ...fileLoaderRule, test: /\.svg$/i, resourceQuery: /url/, // *.svg?url }, // Convert all other *.svg imports to React components { test: /\.svg$/i, issuer: fileLoaderRule.issuer, resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url use: [ { loader: '@svgr/webpack', options: { typescript: true, ext: 'tsx', }, }, ], } ); // Modify the file loader rule to ignore *.svg, since we have it handled now. fileLoaderRule.exclude = /\.svg$/i; return config; }, 它可以工作，但智能感知不起作用，即 SampleIcon 具有 any 类型。我尝试在根目录中创建 declarations.d.ts 文件并将其添加到 tsconfig.json 列表中的 include 中，但效果不佳。这是我的宣言： declare module '*.svg' { import React from 'react'; const SVG: React.VFC<React.SVGProps<SVGSVGElement>>; export default SVG; } 有什么想法吗？ 这很尴尬，但经过 2 小时的搜索后，我解决了这个问题： 确保 declarations.d.ts 文件位于 globals.d.ts 中的全局 tsconfig.json 文件之前： 错❌： "include": [ "next-env.d.ts", "declarations.d.ts", ... ] 正确✅： "include": [ "declarations.d.ts", "next-env.d.ts", ... ]
在 Next.js 电子商务应用程序中存储图像的最佳实践是什么
我正在为一个电子商务网站开发 Next.js 项目，并且正在探索存储产品图像的最佳选项。我想到了两种主要方法，我很想得到一些建议......
我需要在基于 cookie 的 API 中使用 CSRF 令牌吗？
如果您正在寻找原始帖子，请点击下面我的个人资料图片旁边的蓝色“编辑[日期]”按钮。 由于 Stack Overflow 决定合作，我删除了这篇文章...
nextjs 项目的公共文件夹在哪里？ 我的意思是，有没有地方可以放置 favicon.png、google 站点验证、manifest.json、robots.txt 等？
我正在为下一个js项目使用remotive api（https://remotive.com/api/remote-jobs）。在此api中，有一个指向公司徽标的URL。 我这样用它 我正在为下一个js项目使用remotive api（https://remotive.com/api/remote-jobs）。在此api中，有一个指向公司徽标的URL。 我就是这样用的 <Image src={'https://remotive.com/job/1912073/logo'} className="w-6 aspect-square" alt="" width={18} height={18} /> 并在配置文件中 /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'remotive.com', port: '', pathname: '/job/**', // Matches any path under /job/ }, ], }, }; export default nextConfig; 但是出现错误.. ⨯ 上游图像响应失败 https://remotive.com/job/1912073/logo 403.. 我正在使用“下一个”：“^14.2.3”， “反应”：“^18.3.1” 任何解决方案。 查了很多网站都没有找到解决办法 此网址首先由 cloudflare 进行安全验证。这就是它返回 403 的原因。检查主机不需要任何验证的任何其他图像链接。
我是 Next.js 的新手，所以我正在寻找解决我的问题的方法并同时寻求建议。 问题： -在空 URL（只是 localhost:8081）上，我有一个登录表单，可以选择切换到
无法在 Next.js 14 中使用 GitHub OAuth 提供程序使 Auth.js 正常工作
我使用的是 Next.js 14.2.1 和最新版本的 Auth.js。 我正在遵循 GitHub 提供商的文档指南：https://authjs.dev/guides/configuring-github 根据文档，我添加了 j...
接下来的 14 个中间件保护登录页面在经过身份验证时不起作用
我想在用户通过身份验证时保护登录页面 URL：http://localhost:3000/authentication/signin。但是，在我的中间件中，当我有权访问并刷新时，我想重定向 u...
Next js（应用程序路由器）：我想通过点击 API 来获取数据，但我收到错误 405（方法不允许）
这是我的代码 // 客户端逻辑 React.useEffect(() => { const getComments = async () => { 尝试 { const 响应 = 等待 axios.get( “http://localhost:3000/api/blog/comm...
在我的 NextJS 项目中，我在 Vercel 上收到此错误： 发现警告 package-lock.json。您的项目包含由 Yarn 以外的工具生成的锁定文件。建议不要在...中混合使用包管理器
Next js（应用程序路由器）：我想通过点击API来获取数据，但我收到错误405（方法不允许）
这是我的代码 // 客户端逻辑 React.useEffect(() => { const getComments = async () => { 尝试 { const 响应 = 等待 axios.get( “http://localhost:3000/api/blog/comm...
在 Next.js 12 + Tailwind CSS 中实现动态字体大小调整以实现辅助功能
我有一个使用 Next.js 12 和 Tailwind CSS 构建的网站。它由数十个页面和组件组成。 我们收到了用户关于字体太小的投诉。为了解决这个问题，我们...
我在下面发送 CI/CD、dockerfile、next.config.js 和 pakcage.json。管道将成功通过，没有任何错误，项目将启动。但是，当在开发分支上时，它仍然使用....
我启动了一个 next.js 全栈项目，并且正在安装 shadcn-ui，但在安装时遇到了错误 当我尝试通过输入安装 shadcn-ui 时 npx shadcn-ui@最新 init 我收到错误消息...
openAI 中不存在角色，Next.js 中找不到消息错误
我在 nextjs 中创建了一个项目，它是 chatgpt 的克隆，所以我使用了 openai api 密钥，但它在某些对象和消息中抛出错误，因为我无法使用一些最新的 openai 导入乐趣...
我可以将 Appollo GraphQl 与 Next14 一起使用吗？
我已经用 ApolloProvider 包装了现有的 Next.Js 14 代码，但它开始大量刷新并给出以下错误： 未处理的运行时错误 错误：上下文在此环境中不可用...
如您所知，默认情况下浏览器发送 GET 请求，服务器返回页面，但就我而言，我向远程服务器发出一些请求并需要获得一些响应，但服务器将我重定向回我的...
在 Next.js 14 服务器组件中访问 window.location.origin
如何从服务器组件访问 Next.js 14 中的 window.location.origin ？此处为 Next.js 13 提供的流行答案不起作用。
切换到Next js中的路由后，如果不进行硬刷新，React状态无法更新
我正在使用 Next 14.1.4 和 React 18。 似乎不进行硬刷新就不可能更新状态。状态的值显然是缓存在客户端的，没有什么可以帮助摆脱它。 期间