问题标签 [nextjs-dynamic-routing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
46 浏览

mongodb - Nextjs 与护照身份验证

我有一个基于 nextjs-mongodb 会话的应用程序,具有受保护的路由和护照身份验证。如果找不到用户,受保护的路由器会将用户重定向到登录。

/受保护的路线...

该函数检查用户是否已经通过 api 登录:

返回:

这在我的本地主机上运行良好。

我将站点部署为 AWS 放大,但即使在 sigin 之后,它也会将用户重定向到/ signin。

我后来将它部署到 Vercel,它工作得非常好!

这里可能是什么问题?请帮忙

0 投票
2 回答
342 浏览

next.js - 如何在 url 中的动态路由 Nextjs 的名称之间添加破折号(-)

我创建了一条动态路线pages/post/[postname].tsx。当我将名称发送到动态路由时,url 会显示带有 url-encode (%20,%E2,...) 的名称,我想在单词之间用破折号显示 url 的名称。像下面的网址

我怎样才能做到这一点?

0 投票
0 回答
214 浏览

reactjs - Next.js 静态导出、路由、动态路由和 .htaccess

TDLR;

知道在next build && next export没有 .js 应用程序 ()的静态导出中成功重新加载动态路由的最佳方法是getStaticPaths什么?

当我使用 create-react-app 和 react-router 时,我必须在文件夹中添加以下.htaccess文件,该/public文件将被复制/粘贴到输出/build文件夹中

它允许从任何路由重新加载的任何页面重定向到应用程序内的正确路由,而不是使用 404。

使用 Next.js,作为连接到外部 api 的静态站点,使用动态路由具有这种行为似乎有点复杂。这不是我可以生成的动态路线,getStaticPaths因为我无法预测这些路径。

我的页面是一个测验,您可以在其中查看您的结果并根据需要分享它们。所以我有

  • /result当我登录时,这是我的私人结果页面
  • /result/[anyName]将是公共结果的页面

在没有 403 或 404 的情况下,很难让页面重新加载正常工作。我尝试了很多东西,比如

  • 在 . RewriteRule ^result/(.*)$ /result [R=301,NC,L]-> 没用
  • exportPathMap在我的-> 中添加一个next.config.js不起作用。

我最终做的是一个技巧:在index.js我页面的根目录中,显示路径的那个/

它实际上是在做这个把戏,但我不太喜欢这样。有了可靠的东西.htaccess,我可以盲目地将粘贴从项目复制到项目,这要容易得多。

有更好的吗?

0 投票
3 回答
849 浏览

javascript - Firestore/Firebase 不适用于 Next.js

嘿,你们真的在这里挣扎。

我正在尝试在我的 Next.js 应用程序中使用 firebase,专门用于 api。当我在本地构建生产和本地开发时,它运行良好。但是,一旦我在 vercel 平台上部署到生产环境,我就会得到一个500 - Internal Server Error. 我已经能够将错误缩小到它是由使用引起的,await getDocs(q)但不确定如何修复它。

本质上,我正在尝试使用来自 firestore 的数据进行动态 api 路由。

firebase.js

/api/users/[name].js

package.json

服务器端的错误是这样开始的: @firebase/firestore: Firestore (9.5.0): INTERNAL UNHANDLED ERROR: Error: ENOENT: no such file or directory, open '/var/task/node_modules/@firebase/firestore/dist/src/protos/google/firestore/v1/firestore.proto'

0 投票
3 回答
560 浏览

javascript - 从 Next JS pages api 通过 id 创建动态路由

我有一个页面,其中包含一个名为的对象列表,stories它以数组的形式显示我的所有故事。我还有一个详细页面,其中显示了一个单独的故事

我想单击列表中任何给定故事的链接,然后它将导航到单个故事。我想_id用作 URL 的动态部分,如下面的 GraphQL 所示。

我的 Graphql

在我的页面 API 我有

在我拥有的故事列表页面上

这很好并且有效。

**然后在我拥有的每个故事的详细信息页面[storyId].js上**

错误

问题

我要做的就是单击任何故事链接,然后通过_id将我带到详细信息页面。我尝试了一些事情,但我做错了一些(或一些事情)。

任何帮助将不胜感激。

之后编辑。我得到的错误。我无法将结果映射到 getStaticPaths

在此处输入图像描述

0 投票
1 回答
70 浏览

next.js - NextJS 重定向到没有查询参数的其他页面

我能够在成功登录后成功将用户重定向到相关仪表板页面。但是,在这种情况下,URI 被严重污染了'somedomain.com/v1/internal/salesman/dashboard?name=SomeName&email=someemail&uid=somenumber'。我希望做一些事情,redirect(<DashBoard someProps={someProps}/>而不是污染 URI。是否有可能在 NextJS 中实现我想要的?

0 投票
0 回答
58 浏览

javascript - Next.js 动态页面错误 FUNCTION_INVOCATION_TIMEOUT

我的 Next.js 站点 ( /flats/[id].js) 在pages文件夹中有一个页面。

这是我的页面

出于某种原因,我在导航到页面时收到此错误。

控制台日志:

我不知道为什么该功能超时(页面上没有太多内容),而且它在本地也可以正常工作。

无服务器函数超时的条件来自 Next.js 文档

超时条件清单 如果您看到执行超时错误,请检查以下可能的原因:

该函数没有返回响应:

  1. 该函数必须返回一个 HTTP 响应,即使该响应是错误的。如果没有返回响应,该函数将超时。
  2. 函数处理请求的时间过长:检查您在函数中发出的任何 API 或数据库请求是否在适用于您的计划的“无服务器函数执行超时(秒)”限制内响应。
  3. 您的函数中有一个无限循环:检查您的函数在执行的任何阶段是否都没有无限循环。
  4. 存在上游错误:检查您尝试调用的任何外部 API 或数据库是否没有任何错误。
  1. 我什至没有使用任何无服务器功能
  2. 没有数据库或 api 调用
  3. 没有
  4. 只是打印你好!

更新:我发现这只发生在 getServerSideProps 上,即使返回的道具是“Hello World”

0 投票
2 回答
818 浏览

reactjs - “警告:列表中的每个孩子都应该有一个唯一的‘键’道具”NextJS 中的错误

我正在 NextJS 中学习 getStaticProps。我正在使用https://jsonplaceholder.typicode.com/posts API 在页面上呈现帖子。以下是我的 JS 文件代码:

但是,控制台给了我以下错误:

我将每个帖子的 ID 分配为“div”标签中的键。但是,我仍然收到错误消息。我的代码有问题还是我应该添加其他内容?

0 投票
0 回答
11 浏览

deployment - Next-auth 在部署的 Vercel 应用程序中通过 Github 尝试登录后收到 404 错误

我正在尝试在 Vercel 应用程序上部署我的 NextJS 项目,但 Github 登录一直失败,并向我显示 github 404 的错误图像: 在此处输入图像描述

开发使用 next-auth 进行身份验证的 next.js 应用程序。它目前设置为 GitHub 作为唯一的提供者。

在开发中,身份验证工作得很好。

在生产中,单击“使用 GitHub 登录”后,我被定向到 404。

我 99% 确定这与我在 GitHub OAuth 应用程序中设置的回调 URL 有关。出于开发目的,它设置为 http://localhost:3000/api/auth/callback/github。显然这对已部署的应用程序没有好处,但我不知道将其设置为什么。

要记住的几件事:

  1. 我没有在我的项目中设置任何规范的 url,但它在部署期间询问 env 变量我应该怎么做?

任何有关此问题的帮助将不胜感激!

0 投票
1 回答
46 浏览

next.js - 在下一个 js 中更改 URL 无法正常工作

我目前正在处理下一个 js 路由,我在 URL 中传递多个参数,我想隐藏这些参数,只想显示一些文本

我在路由器中传递参数为

我试图将其实现为

但它不起作用,我的页面是

我没有得到我做错的地方,在此先感谢