小编You*_*mar的帖子
Next.js 抛出错误：错误：在页面文件夹内使用 _document.js 时未安装 NextRouter
我希望能够根据当前区域设置自定义 HTML。我创建了一个_document.js内部pages目录。我使用了这段代码：
import { Html, Head, Main, NextScript } from 'next/document'
import { useRouter } from 'next/router'
export default function Document() {
const { locale } = useRouter();
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
但我收到这个错误：
错误：错误：NextRouter 未安装。https://nextjs.org/docs/messages/next-router-not-mounted
当我访问指定的 URL 时，我看到他们说我正在使用外部逻辑<Main />。那么，我怎样才能进入locale内部呢_document.js？
我发现NextRouter 没有安装 Next.JS但即使使用next/navigation对我来说也不起作用，并且我收到此错误：
错误：预期要安装的应用程序路由器不变
推荐指数
解决办法
查看次数
在 Next.js 中使用动态渲染组件时出现错误
我正在尝试Leaflet使用 Typescript 在 Next.js 中渲染地图。我读到需要禁用 ssr 以避免“窗口未定义”问题，但在尝试生成地图时：
import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";
export const Leaflet: React.FC = () => {
return (
<MapContainer center={{ lat: 48.71291, lng: 44.52693 }} zoom={13}>
<TileLayer
attribution='© <a href="http://osm.org/copyright%22%3EOpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
);
};
这是渲染它的：
const Home: NextPage = () => {
const MapWithNoSSR = dynamic(() => import("../components/Leaflet"), {
ssr: false,
});
return (
<>
<MapWithNoSSR/>
</>
);
};
export default Home
TypesSript 给我这个错误：
'() => …
推荐指数
解决办法
查看次数
在 React Native 的输入字段右侧添加一个眼睛图标
我正在开发一个反应本机项目。我的登录页面上有一个密码字段，我想在输入字段的右端添加一个眼睛图标。我的代码目前如下所示：
<View><TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password'></TextInput></View>
这是带有占位符文本的普通输入字段。
推荐指数
解决办法
查看次数
如果 useEffect 侦听非状态值，那么依赖项数组中包含非状态值会产生什么效果？
每次Comp重新渲染，rand都会有不同的值。会触发吗useEffect？
function Comp({}) {
const rand = Math.random();
useEffect(() => {
// do stuff
}, [rand])
}
推荐指数
解决办法
查看次数
如何将 EJS 模板引擎与 NestJS 一起使用？
我想在 NestJS 中使用 EJS 作为模板引擎。使用 Express，我可以在主文件中配置 EJS，如下所示：
app.set("view engine", "ejs");
我怎样才能最好地用 NestJS 实现这个？Nestjs 不附带.set方法。
推荐指数
解决办法
查看次数
React，页面刷新后使用 useEffect 丢失 localStorage 中保存的数据
这可能是一个菜鸟问题，但我在useEffect()钩子方面遇到了一些麻烦。我有一个记笔记应用程序，我想让数据持久保存。我使用 2useEffect秒：一个用于第一次刷新/加载页面时，另一个用于当我向应用程序添加新注释时。
我放置了一些日志来检查发生了什么：
const [notes, setNotes] = useState([
{
noteId: nanoid(),
text: 'This is my 1st note!',
date: '30/07/2022'
},
{
noteId: nanoid(),
text: 'This is my 2nd note!',
date: '30/07/2022'
}
])
// 1st time the app runs
useEffect(() => {
const savedNotes = JSON.parse(localStorage.getItem('react-notes'))
console.log('refresh page call:',savedNotes)
if(savedNotes) {
setNotes(savedNotes)
}
}, [])
//every time a new note is added
useEffect(() => {
localStorage.setItem('react-notes', JSON.stringify(notes));
console.log('new note call:', notes)
}, [notes])
这种行为有点奇怪，因为刷新页面时，新数据出现在日志中，但随后消失，仅保留硬编码数据：
它还拨打了比我预期更多的电话。对这里发生的事情有什么想法吗？
推荐指数
解决办法
查看次数
Next.js 路由器 - 找不到 404 页面
我是 Next.js 的新手，正在摆弄路由器。有些页面可以工作，但动态页面则不能。有谁知道我做错了什么？
这是我的文件结构：
产品主页可以正常工作，但是当我循环浏览产品并在这些产品中时，我有一个如下链接：
<Link href={`/products/${props.product._id}`}>
但是当我点击任何产品时，我都会收到 404。有人知道我做错了什么吗？谢谢。
推荐指数
解决办法
查看次数
如何从 Next.js 中的 API 路由发送 JSON 响应？
我正在为 Next.js 应用程序开发一个小型 REST API。如果我将我的放在route.tsrootDir -> app -> api -> hello -> route.ts 中，如下所示，那么它可以工作：
//route.ts
export async function GET(request: Request) {
return new Response('Hello, Next.js!')
}
我可以通过 Postman 向 localhost:3000/api/hello 发出成功的 GET 请求。
我现在将代码更改为以下内容：
import { NextApiRequest, NextApiResponse } from "next";
export async function GET(request: NextApiRequest, response: NextApiResponse) {
return response.json({ message: "Hello, Next.js!" });
}
现在它失败了，我收到错误消息：
error TypeError: response.json is not a function
该问题是已知的，但升级到最新的 lts 或最新的节点版本并不能解决我的问题： https: //github.com/vercel/next.js/issues/48524。
推荐指数
解决办法
查看次数
Next.js App Router 的 SEO 性能：服务器组件还是客户端组件？
我曾经认为，当您使用该"use client"指令声明页面或组件时，您将无法在浏览器的“查看页面源代码”上看到这些页面，因为它们仅在客户端使用 JS 呈现（仅就像纯 React 发生的情况一样）。
然而，我刚刚测试了这个案例，发现几乎所有在“使用客户端”下编写的内容仍然显示在页面源代码上。那么服务器组件和带有“使用客户端”指令的 SEO 组件之间有什么区别呢？
使用服务器组件也有助于 SEO 吗？或者它的主要应用是为了提高性能？
推荐指数
解决办法
查看次数
服务器组件时在Next JS中获取动态路由中的路径？
我需要在 Next JS 中获取动态路由中的路径。这在客户端组件中很容易做到。
在 src/app/[id]/page.tsx 中
"use client";
import { usePathname } from "next/navigation";
export default function Page() {
const pathname = usePathname();
但是您不能usePathname在服务器组件中使用。如何在 Next JS 13 中获取 React 服务器组件中的 url？
推荐指数
解决办法
查看次数
标签 统计
javascript ×9
reactjs ×8
next.js ×6
typescript ×4
node.js ×2
dom ×1
ejs ×1
html ×1
nestjs ×1
react-native ×1
rest ×1
seo ×1