reactjs NextJS自定义URL

qvk1mo1f  于 2023-01-30  发布在  React
关注(0)|答案(2)|浏览(201)

我想把我的博客从Jekyll转移到NextJS,看看如何指定自定义网址。我遵循了他们网站上的官方NextJS指南,但路由部分相对简单。从文档中,我得到的网址是基于文件夹/文件结构,但我想有一个子文件夹,每个网站主题在页面文件夹,但保持网址平面。类似的东西:

  • 页(顶层文件夹)
  • 投资(子文件夹)
  • how-to-start-investing.js(https://example.com/how-to-start-investing〈-URL中没有投资文件夹)
  • devops(子文件夹)
  • js([https://example.com/how-to-upgrade-ubuntu〈-URL中没有devops文件夹)

在Jekyll中,我使用Front Matter为每个页面指定一个自定义URL。在NextJS中,看起来我必须使用重写,但有其他选项吗?此外,Link组件有一个属性来更改链接URL,但这只是为了显示带有URL的链接。

2g32fytz

2g32fytz1#

在NextJS中,路由是由页面目录的结构来定义的。如果你不想这样,你必须解决这个问题。你可以选择:
1.使用rewrites将来自/how-to-start-investing/的传入请求Map到/investing/...-请注意,与redirects不同,重写不会暴露目标路径,因此用户将停留在/how-to-start-investing/ url上。
1.在根目录中创建名为“您希望如何显示路由”的文件(例如how-to-start-investing.js)。在该文件中,导出另一个组件,例如:

// how-to-start-investing.js
import { HowToStartInvesting } from "../components/investing/HowToStartInvesting";
export default HowToStartInvesting;

如果你使用这种方法,我建议你把你的组件放在pages目录之外的某个地方,这样你就不会为同一个组件有两个url。

lmvvr0a8

lmvvr0a82#

终于让它工作了,所以为了使用自定义URL,我必须合并重定向和重写,后者是SEO所需要的。
如果没有重定向,我可以只使用规范标记告诉Google我的首选URL,但从技术上讲,同一篇文章可以使用两个URL,在我的情况下:

  • sypalo.com/how-to-start-investing
  • sypalo.com/investing/how-to-start-investing

所以最终的next.config.js是:

module.exports = {
   async rewrites() {
     return [
       {
         source: '/how-to-start-investing',
         destination: '/investing/how-to-start-investing'
       }
     ]
   },
   async redirects() {
    return [
      {
        source: '/investing/how-to-start-investing',
        destination: '/how-to-start-investing',
        permanent: true
      }
    ]
  }
 }

这将对所有URL重复。

相关问题