问题标签 [nextjs-dynamic-routing]

我正在使用 NExtjS 和 react-redux 为管理面板创建登录页面和仪表板。下面是我尝试过的代码。如果我使用 ID 和密码登录，我可以登录并从状态中获取所有值，并且一切正常。问题是，如果我尝试直接访问仪表板 URL，它会说明 Cannot read properties of null (reading 'name')
如何将用户重定向到登录页面而不是起床返回语句 ???

我想为我的 next.js 项目创建一个动态路由结构，因此主目录将是countries并且该目录下将有许多其他国家/地区。

在我的 pages 文件夹中，我创建了一个名为countries并创建了一个文件的文件夹[...slug].js。我必须在文件夹中创建一个文件index.js才能countries访问www.mysite.com/countries。

问题是index.js并且[...slug].js具有相同的代码，我只想维护一个文件。如何配置 nextjs 以[...slug].js用于www.mysite.com/countries和它下的任何子页面？

我正在尝试使用来自 Airtable 中的表的数据在 Nextjs 中设置分页，但我无法弄清楚如何通过 getStaticProps 和 getStaticPaths 来实现这一点。

以下是我的目录结构的一部分

我在 posts/index.js 中编写了以下函数，以从后端 Airtable 表中检索数据。该函数预计将返回约 100 多条记录。

下面是我的 getStaticProps()

我需要将约 100 多条记录分页成每页 9 条记录，我只是无法弄清楚如何使用 getStaticProps 和 getStaticPaths 来做到这一点。作为尝试，我将 posts/index.js 重命名为 posts/[page].js 并如下修改 getStaticProps 以创建一个记录数组，每页分成 9 个。

以下是帖子的代码片段。

我什至不知道我上面写的 getStaticProps 是否有意义。此时我不知道如何编写 getStaticPaths 来创建路由。

任何帮助表示赞赏。顺便说一句，我是一个完全的js菜鸟，刚刚开始学习。

我们如何检测 Next.js 项目的 URL 哈希的变化？

我不想在每次 slug 更改时重新加载我的页面。
我不能使用，因为我的所有数据都来自 DB
示例： 当单击从
http://example/test#url1
到的标签时
http://example.com/test#url2

尝试了以下方法，但这似乎仅适用于路径更改。

我想在页面加载之前使用 url 的查询字符串来获取一些数据，但是当我打印出参数时，我只能得到路径。

使用它作为启动项目：

转到pages/posts/[id].js并添加console.log(params)到该getStaticProps功能。

然后导航到http://localhost:3000/posts/pre-rendering?abc=123。服务器记录{ id: 'pre-rendering' }而不是{ id: 'pre-rendering', abc: '123' }

我在非动态路由页面上尝试了相同的方法。转到，http://localhost:3000/?a=b服务器日志将显示undefined

我不想使用 useRouter 因为这似乎只在页面加载后显示查询字符串。第一个开发控制台日志是undefined，然后只记录查询字符串。

如何在页面加载之前访问查询字符串？

我有一个 Next.js 页面，其中页面是静态生成的（使用next export）。这是一条动态路由，但我只会在初始页面加载后（在 a 中useEffect）在客户端上获取数据。

路径类似于：/pages/foo/[id].tsx. 这实际上是唯一存在的路线。

我的问题是：

• 如果我直接访问 URL（例如在 URL 栏中输入https://mysite.fake/foo/1337），我会得到 404。
• 如果我使用 a 导航到该路线，<Link />它会按预期工作
• 如果我然后重新加载页面，我会再次收到 404。
• 在本地开发中，它工作正常。该问题仅在部署时存在。

有问题的页面正在使用router.query，但我对完全静态的页面（例如只是/pages/bar/baz.tsx）有同样的问题。

例子：

据我从关于动态路由和数据获取的 Next.js 文档中了解到，这应该是可能的。

我next.config.js的很光秃：

我究竟做错了什么？

在另一个动态页面路由之后，我有一个动态页面路由。我只收到第二个动态页面路由的警告。

如何解决这个警告？

我有一个我使用的多语言应用程序，exportPathMap但我想过渡到getStaticProps和getStaticPaths。我的结构如下所示：

pages/[language]/[app-slug].js

但是，[app-slug].js可能是 20 个不同应用程序中的任何一个，其代码不相关......

在阅读了我认为的警告后，通过预先定义getStaticPaths，我可以做到：

但它抛出You cannot use different slug names for the same dynamic path ('app1' !== 'app2')

有没有办法根据路径动态加载反应应用程序代码，或者在一个仓库中有多个动态文件？（所有静态路径都是已知的）

这个使用查询值的类似答案不适用于我的情况，SEO 和包大小是首要任务。

我有一个 Shopify 应用程序，它在安装和加载时会显示一两秒钟的错误，然后才能正常加载。该错误说“页面未定义”并且源自 NextJS 代码。这部分准确地说：

在第二个 if 语句中引发错误。
该文件位于 /node_modules/next/dist/shared/lib/router/router.js 中，因此我无法将内容更改为该文件。

我认为这与我的动态路线有关，但我无法终生找出问题所在。别人知道吗？

我的路由：

如果需要更多信息，请告诉我。

我面临下一种情况，我正在使用 Next.js，我需要管理两个将使用动态路由的不同文件。原因是网站有静态页面和SSR页面，静态页面使用getStaticPath和getStaticProps功能，SSR使用getServerSideProps。所以 Next 不允许在同一个文件上拥有这些功能，这就是为什么我不能只有一个文件来呈现不同的页面组件或一些逻辑来管理 ssr 或静态。

预期的：

mysite.com/[...slug]将用于静态页面

mysite.com/[...category]将用于 ssr 页面

所有页面都来自 wordpress CMS，它们的 url 结构不能更改。我的意思是上面迷你示例中的 ssr url 页面不能mysite.com/etc/[...category]