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

hi3rlvi2  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(149)

TDLR;

在静态导出next.js应用(next build && next export)而不使用getStaticPaths的情况下,如何成功重新加载动态路由?

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

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

它允许从任何路由重新加载的任何页面重定向到应用程序内的正确路由,而不是404。
使用Next.js * 作为连接到外部API* 的静态站点,动态路由的这种行为似乎有点复杂。我不能用getStaticPaths生成动态路由,因为我无法预测这些路径。
我的网页是一个测验,你可以看到你的结果,如果你愿意分享他们。

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

在没有403或404的情况下,很难使页面重新加载正常工作。

  • 在. RewriteRule ^result/(.*)$ /result [R=301,NC,L]->中添加RewriteRule无效
  • next.config.js->中添加exportPathMap不起作用。
const moduleExports = {
  reactStrictMode: true,
  exportPathMap: () => ({
    "/": { page: "/" },
    "/result/arnaud": { page: "/result" },
  }),
  images: {
    loader: "imgix",
    path: "",
  },
  trailingSlash: true,
};

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

const router = useRouter();

  useEffect(() => {
    if (router.asPath?.includes("result") && router.asPath?.split("/").length > 1) {
      router.push(router.asPath);
    }
  }, [router.asPath]);

它实际上是在做这件事,但我不太喜欢这样,用一个可靠的.htaccess要容易得多,我可以盲目地从一个项目复制粘贴到另一个项目。
有更好的吗?

oxf4rvwz

oxf4rvwz1#

我认为最好的方式为正常路线是:
打开next.config.js并添加trailingSlash配置:

module.exports = {
  trailingSlash: true,
}

更多信息:https://nextjs.org/docs/app/api-reference/next-config-js/trailingSlash
对于动态路由,应该为每个动态路由添加一个.htaccess文件,例如:
假设这是动态路由构建后的结构:

product/[pid]/index.html

product文件夹中添加一个.htaccess文件,如下所示:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /product/[pid]/index.html [NC,L]

相关问题