问题标签 [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.
javascript - 无法获得非常简单的 i18n 和动态路由来使用 Next.js
首先要做的事情——我已经阅读了 Next.js 文档,通过了教程,查看了许多示例,但归根结底,我仍然无法使用 Next.js 实现一个非常简单的事情。
我有一个具有以下语言环境的应用程序:en
和de
.
路线如下所示:
所以基本上,我需要用两种语言显示一些与事物 ID 无关的静态文本。这些只是对所有 ID 都相同的纯文本。然后我有一些 AJAX 实际上需要路径中的 ID。
现在麻烦开始了:
- 如果我没有
getStaticProps
inthings/[id].js
,我会收到此错误:
- 然后我添加
getStaticProps
这样的:
并得到这个错误:
- 然后我
getStaticPaths
像这样添加:
因为我有一百万个 ID,所以我无法预先生成所有页面。此外,在应用程序部署后会出现新的 ID,因此我无法在构建期间将所有可能的 ID 作为路径列出。
现在我得到这个错误:
我无法相信在一个声称使用 React 可以让生活更轻松的“框架”中实现如此简单的事情怎么会如此困难。我正在尝试将现有应用程序从 create-react-app 迁移到 Next.js,但是非常简单的事情很难实现。
请告诉我如何实现以下非常简单的事情:
- 拥有一个静态页面,其中包含两种语言的静态文本:EN 和 DE。
- 让用户像这样访问页面:
/[locale]/things/[id]
. - 有一些实际使用来自 URI 路径的事物 ID 的 AJAX 代码。
next.js - 无法访问下一个js中的文件夹内的文件
我正在下一个 js 中使用动态路由,文件夹结构就像
在这里我的 [[...index]].js 文件是动态的,我需要显示所有国家/地区的数据,直到从标题下拉列表中选择任何国家,然后需要根据 [[...index] 中的所选国家/地区显示数据]].js,所以从 index.js =>[[...index]].js 把它当作动态的
但我的问题是当我想从家里去购物车时,我是这样写的
它没有导航到购物车页面停留在 [[...index]].js 中,所以我将购物车重命名为 [cart] 然后我可以去购物车,但我的问题是当我想导航到关于页面时已将其重命名为 [about] 它会引发类似的错误
当我路由到任何页面时,它将转到 [购物车] 页面,请帮助
reactjs - Next.js API Routes 用于开发,但 404 用于生产
在我的 next.js 网站中,我有一个 api 端点/pages/api/views/[slug].js
,它从我的每个博客的数据库 (supabase) 中获取视图数量。该设置在我的开发服务器 ( npm run dev
) 中运行良好,但是当我将应用程序部署到生产环境时,对/pages/api/views/[slug].js
端点的所有 API 调用都返回404
,表示那里没有页面。
我在 vercel 的仪表板中设置了环境变量。
此外,当我尝试调用默认/pages/api/hello
端点时,我还会收到 404 错误。
制作网站:https ://www.ganning.me/blog
GitHub 回购:https ://github.com/ganning127/ganning.me
hello.js
session - 没有登录表单和 API 路由的 Nextjs 会话?
我正在构建一个不需要任何身份验证的应用程序,但我仍计划将订阅表单中的一些数据存储在数据库中,并调用一个 API 路由来处理它。
我想通过生成会话并允许我仅将请求提交给具有正确会话的人来为我的 API 端点实现最低限度的安全性。
但是我在 Nextjs 或库中找不到任何可以帮助解决此问题的好例子。任何人都可以建议最好的方法吗?
谢谢
javascript - 如何设置没有服务器端渲染的参数化下一个路由?
我正在尝试使用我的 next.js 配置设置路由。到目前为止,我尝试的一切都没有产生预期的结果。这对我来说变得令人困惑和沮丧,任何帮助将不胜感激。
这是我想要的:
- 网址转到
/
=>/index.js
- 网址转到
/users/
=>/user/index.js
- 网址转到
/users/[user-id]
=>/user/user.js
这是不起作用的:
reactjs - 如何在下次导出时将 nextjs 索引文件保存在各自的文件夹中
我有一个文件夹结构NextJs
我npx next build && npx next export
得到
我希望它尊重我的内容结构并生成以下树
注意如何pages/blog/index.jsx
导出./blog.html
而不是预期./blog/index.html
如何防止默认并以预期格式生成?
PS:整个网站是静态的,并且是在和的帮助下生成getStaticProps
的getStaticPaths
javascript - 如何在 Next.js 的嵌套路由中呈现根页面
这是我在 Next.js 应用程序上的目录结构:
当我打电话时,domain.com/users/1
我希望 users->index.js 组件也被渲染。它只呈现具有这种结构的 /userid 路由。
在 react-router 中等效,<Outlet/>
但我在 Next.js 中找不到如何操作
javascript - 如何在没有 getStaticPaths 的情况下使用 Next.js 构建具有国际化路由 (i18n) 的动态路由?
我正在尝试找到一种解决方案来构建简单的虚拟动态路由,以使其具有以下内容:/order/{productid}。
Next 允许我们采取不同的策略,但为了实现我所需要的似乎,我看到了两种可能性:
静态路径生成:由于我有大约 1400 多种产品,因此只有在我可以使用 ISR 的情况下,它的静态生成才有意义,所以我只能获取一些报价,其余的则使用 ISR 增量生成。不幸的是,我的用例不允许我使用 ISR,因为我在欧洲,并且此功能创建的 lambda 在美国,这对我来说是一个限制。
基本动态路由:我尝试使用动态路由运行虚拟示例,但是当使用 i18n 设置执行此操作时,它会陷入无限循环。我非常努力地研究它,但没有发现任何有用的东西。
我尝试了什么? 我采用了这个示例https://nextjs.org/docs/routing/dynamic-routes并将 i18n 添加到 docs 示例中,以便我可以展示这个问题。
你可以在这里找到它:https ://github.com/sergioviniciuss/next-dynamic-routing-i18n
请,欢迎任何想法。
reactjs - 错误:在 /categories/[slug] 的 getStaticPaths 中未将必需参数 (slug) 作为字符串提供
我目前正在制作一个博客网络应用程序,并希望在同一类别中显示帖子。但是,目录 category/[slug.id] 中关于 GraphQL 的 NextJS 动态路由似乎存在问题。问题本身应该很简单,但我一生都无法弄清楚出了什么问题。显示的错误是
以下是与错误相关的所有必要功能。作为一个侧节点,我在同一目录中也有 blog/[slug.id],这是我第一次处理动态 GraphQL 路由。
查询博客中所有相关类别的功能:
使用类别的 slug 获取所有帖子的功能:
静态路径和静态道具功能: