标签: nextjs-dynamic-routing
动态设置元数据而无需重复请求 - NextJS 13
考虑以下服务器端组件，它是应用程序目录中某个页面 (page.js) 的一部分，代表一个人：
export default async function Person({ params }) {
const person = await getPerson(params.id);
return (
<h1> {person.name} </h1>
<p> {person.bio} </p>
)
}
显然，这里的目的是动态呈现新页面，其想法是 URL 看起来像/person/{id}，其中 ID 是每个人的唯一 ID。
我遇到的问题是我需要为页面设置元数据。例如，我希望标题为person.name，描述为person.description。根据我所读到的内容，在 NextJS 13 中使用 app 目录执行此操作的唯一方法是使用generateMetadata，它看起来像这样：
export async function generateMetadata({ params }) {
const person = await getPerson(params.id);
return {
title: person.name,
description: person.description
}
}
我相信您现在可以看到这个问题：我需要getPerson在同一页面中发出完全相同的请求 ( ) 两次。据我所知，没有办法在generateMetadata页面组件之间传递数据。
该<Head>组件next/head似乎是理想的解决方案，但它似乎不适用于 NextJS …
推荐指数
解决办法
查看次数
NextJS 重定向 - req.headers.referer 丢失 - 如何获取原始 URL？
我不知道如何从 Next.js 重定向中检索原始 URL 请求。实际上，代码在我的本地服务器上按预期工作，但信息在生产中消失了。
我的next.config.ts包括：
{
source: '/user/:path*',
destination: '/api/forward/forward',
permanent: true,
}
在本地运行时，我有以下内容：
...
'postman-token': '4d592b2f-a759-415c-a775-14e838f25d1e',
'accept-encoding': 'gzip, deflate, br',
connection: 'keep-alive',
'content-length': '3',
referer: 'http://localhost:3000/user/5f8d46425afbfe125bc0277c/balances/2970022',
host: 'localhost:3000'
...
所以这里一切都很好，我可以使用引用者。
不幸的是，我无法从生产中的请求中检索原始 URL；我唯一得到的是：
{
accept: 'application/json',
authorization: 'bearer XXXXX',
'client-id': 'YYYYY',
'content-type': 'application/json',
'content-length': '147',
host: 'www.CCC.com',
'accept-encoding': 'gzip',
'user-agent': 'okhttp/4.9.1',
'x-forwarded-proto': 'https',
'x-forwarded-port': '443',
'x-forwarded-for': '176.145.84.153',
forwarded: 'proto=https;for=176.145.XX.XXX:2112;by=185.42.XXX.XXX',
'sozu-id': '...'
}
如果有人知道如何获取初始 URL 以便正确转发，我将不胜感激。
推荐指数
解决办法
查看次数
无法将 aws-amplify 与 NextJS 13.4 api 路由一起使用
我已成功在以前版本的 NextJS 中使用页面/api 路由连接到 AWS API Gateway。我正在尝试使用新的应用程序路由器在 app/api/route 中执行相同的操作。但我无法让aws-amplify图书馆工作，即
const {Auth: ssrAuth} = withSSRContext({ req: request }); //works
const user = await ssrAuth.currentAuthenticatedUser(); //fails
这与页面路由器配合得很好，我能够获取用户令牌以将授权者附加到 API 网关请求。
知道为什么吗？请求就在那里，我可以看到带有用户令牌的 cookie。我究竟做错了什么？
非常感谢任何反馈/提示
api-gateway aws-amplify aws-amplify-sdk-js nextjs-dynamic-routing next.js13
推荐指数
解决办法
查看次数
如何使用新的应用程序路由器访问 Next.js 13.4 中的查询参数？
我正在使用最新版本的 Next.js (13.4) 和新的应用程序路由器。
在我的应用程序中，我有一个 Link 组件，其按钮位于 ../components/products.tsx 文件中。
每个产品都有一个“详细信息”按钮，可使用“链接”组件导航到动态路线。我使用链接组件的路径名和查询属性来传递查询参数和路由。
以下是 ../components/products.tsx 文件中 Link 组件的示例：
<Link href={{
pathname:`product/${item._id}`,
query:{
_id: item._id,
title: item.title,
description: item.description,
oldPrice: item.oldPrice,
price: item.price,
brand: item.brand,
image: item.image,
isNew: item.isNew,
category: item.category,
},
}}
as ={`product/${item._id}`}
>
在路径为 app/product/[id] 的动态路由组件 (page.tsx) 中，我想访问查询参数并将它们呈现在页面上。以下是 page.tsx 文件的示例：
import React from 'react';
import { useRouter } from 'next/router';
const ProductPage = () => {
const router = useRouter();
const query = router.query;
return (
<div>
<h1>Product Details</h1>
<p>ID: {query._id}</p> …query-string next.js next-router nextjs-dynamic-routing next.js13
推荐指数
解决办法
查看次数
无法获得非常简单的 i18n 和动态路由来与 Next.js 一起使用
首先，我已经阅读了 Next.js 文档，通过了教程，查看了许多示例，但最终，我仍然无法使用 Next.js 实现一个非常简单的事情。
我有一个具有以下区域设置的应用程序：en和de。
路线如下：
/en/things/[id]
/de/things/[id]
所以基本上，我需要用两种语言显示一些与事物 ID 无关的静态文本。这些只是所有 ID 都相同的纯文本。然后我有一些实际上需要路径中的 ID 的 AJAX。
现在麻烦开始了：
- 如果我没有
getStaticProps，things/[id].js我会收到此错误：
Error: MISSING_MESSAGE: No messages were configured on the provider.
- 然后我添加
getStaticProps这样的内容：
export async function getStaticProps({locale}) {
return {
props: {
messages: await import(`../messages/${locale}.json`)
}
}
}
并得到这个错误：
Error: getStaticPaths is required for dynamic SSG pages and is missing for '/things/[id]'.
- 然后我
getStaticPaths这样添加：
export const getStaticPaths = () => ({
paths: [], …推荐指数
解决办法
查看次数
为什么在构建 NextJS 项目时会调用我的 API 路由？
我有一个在数据库中生成数据的 API 路由，该 API 路由仅在我在 Vercel 中设置的 CRON 作业中调用。
但是，每次我构建项目时，新数据都会显示在数据库中。我确实相信这是因为 NextJS 的本质是预先执行端点，因此它会在缓存中，但如何防止在数据库中添加数据？
export const revalidate = 60 * 60 * 24 * 6; // every 6 days
export async function GET(request: Request) {
const url =
`${process.env.COINMARKETCAP_URL}/v1/cryptocurrency/listings/latest?limit=100` ??
"";
var options = {
headers: {
"X-CMC_PRO_API_KEY": process.env.COINMARKETCAP_API ?? "",
},
next: { revalidate: 60 * 60 * 24 * 6 },
};
const res = await fetch(url, options);
const data = await res.json();
const tokensList: Tokens[] = …推荐指数
解决办法
查看次数
通过链接组件打开新页面时，滚动到顶部行为在 Next.js 中不起作用
在 Next.js 中，我遇到一个问题，当我单击链接打开新页面时，新页面会在与上一页相同的滚动位置处打开。例如，如果我在产品列表页面上，并且已向下滚动以查看最后一个产品，则当我单击该产品时，产品详细信息页面将打开，滚动位置仍位于底部。
我希望打开产品详细信息页面时页面滚动到顶部。如何在 Next.js 中实现这种滚动到顶部的行为？
这是我尝试的可能的解决方案
尝试1
import { useEffect } from 'react';
import { useRouter } from 'next/router';
const ProductDetails = () => {
const router = useRouter();
useEffect(() => {
const handleRouteChange = () => {
window.scrollTo(0, 0);
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router]);
return <>
// product details code goes here
<>;
};
export default ProductDetails;
尝试2
import { useEffect } from 'react';
import { useRouter } from 'next/router';
const …推荐指数
解决办法
查看次数
如何在 Next.js 中重新验证特定动态段 (/product/123)，而不重新验证所有段 (/product/[id])？- Next.js 13.4.6
我正在开发Next.js项目版本 13.4.6并且我有一个动态路由 /product/[id]。当特定产品的内容发生更改时，我需要重新验证其数据，例如/product/123。
\n我知道revalidatePath函数，它允许重新验证与特定路径关联的数据。但是，当我将 revalidatePath 与动态段（例如 revalidatePath('/product/[id]') 一起使用时），它会重新验证/product/[id] 下的所有段。
\n以下是演示如何使用 revalidatePath 函数的示例代码片段：
\nimport { NextRequest, NextResponse } from 'next/server'\nimport { revalidatePath } from 'next/cache'\n\nexport async function GET(request: NextRequest) {\n const path = request.nextUrl.searchParams.get('path') || '/'\n revalidatePath(path)\n return NextResponse.json({ revalidated: true, now: Date.now() })\n}\nNext.js版本13.4.6文档表示 revalidatePath 函数接受单个参数 path，该参数应该是一个字符串，表示与要重新验证的数据关联的文件系统路径。这不是字面意思的路由段（例如/product/123），而是文件系统上的路径（例如/product/[id]）\xe2\x80\x8b\xe2\x80\x8b。
\n我想要实现的是有选择地仅重新验证特定的产品 ID，例如 /product/123，而不重新验证 /product/[id] 下的所有其他段。
\n有没有办法在 …
推荐指数
解决办法
查看次数
从 nextjs Link 组件传递数据并在 getStaticProps 中使用它
我有一个动态路由，我试图在 url 中显示标题并将id传递（隐藏）到我的动态路由并id在中使用getStaticProps. 我发现我无法在 nextjs 中轻松传递数据，就像我们过去使用 React Router 或其他客户端路由库传递数据一样。
我正在遵循这个答案，但是当我console.log(context.params)看不到id传递过来的内容时Link，我在这里做错了什么？
// index.js
<Link
href={{
pathname: `/movie/[title]`,
query: {
id: movie.id, // pass the id
},
}}
as={`/movie/${movie.original_title}`}
>
<a>...</a>
</Link>
// [movieId].js
export async function getStaticProps(context) {
console.log(context.params); // return { movieId: 'Mortal Kombat' }
return {
props: { data: "" },
};
}
推荐指数
解决办法
查看次数
标签 统计
next.js ×8
next.js13 ×6
javascript ×3
reactjs ×2
api-gateway ×1
aws-amplify ×1
next-router ×1
node.js ×1
query-string ×1
redirect ×1