我目前在使用完全静态生成的Next js,因为我想从S3 + cloudfront(不涉及服务器)提供所有页面。Next js对此有很好的支持,除了动态页面(例如:/posts/:id)。解决这类场景的所有框架功能都涉及在构建时渲染所有可传递的页面(这是不可行的),或者让服务器渲染这些具有动态路由的页面(因此,使网站成为混合应用程序)。为了继续保持完全静态,我需要有一个方法来解决这个问题。在create react应用程序中,可以使用react-router并在客户端解析路由,这正是我想为动态路由做的。但据我所知,next js和react-router不兼容,所以显然这不是一个选择。
2条答案
按热度按时间0sgqnhkj1#
解决这个问题的一个方法是使用查询参数而不是路径参数
作为提醒,我们有这种类型的架构(文件)。
在
next.config.js
中使用output: 'export'
。问题是,我们无法在此配置中访问/user/:id页面(仅在CSR中)
解决方案是在此文件夹中添加
index.tsx
这个
index.tsx
的内容是要获得更简单的URL级访问,请在
next.config.js
中使用trailingSlash: true
。这将允许使用/user?id=abc
,因为在这种情况下,我们在url中得到404(或者我们必须添加.html
)。..从这个意义上说,要访问页面,我们使用
/user?id=abc
,它将重定向到/user/abc
。我意识到这并不能完全回答原来的问题。但是,对于许多情况(实验),它是有效的。所以我在这里分享这个。
iaqfqrcu2#
根据我所知,我认为SSG上的动态路由是支持的。动态路由功能独立于
getServerSideProps
或getStaticProps
。你可以使用next/router
来获取你需要的参数并相应地渲染你的页面。下面是官方的例子。
参考资料
https://nextjs.org/docs/routing/dynamic-routes