0

在/pages我有[page].js和index.js。

[page].js通过“CustomPage”的值生成所需的页面。它的内容来自一个 Data-JSON-File。

只要我从主页开始并使用网页内的链接，它就可以正常工作。例如，我现在有 2 页：/impressum 和 /datenschutz。

所以点击链接“Impressum”打开myDomain.com/impressum（它工作，但请注意，最后没有.html）。 但是，如果我刷新页面，或者myDomain.com/impressum直接在浏览器的地址栏中输入，我会收到一个未找到的错误（来自 nginx-server，而不是来自下一个！）。

第二次尝试

由于我需要一个完全静态的页面，并且出于测试目的在文件中添加了getStaticPath和getStaticProps，因此将创建“真实”的 html 文件：

import { useRouter } from 'next/router';

import Index from './index';
import config from '../content/config.yml';
import CustomPage from '../src/components/CustomPage';

const RoutingPage = () => {
  const { customPages } = config;
  const router = useRouter();
  const { page } = router.query;

  const findMatches = (requestedPage) =>
    customPages.find((customPage) => customPage.name === requestedPage) ||
    false;

  const customPageData = findMatches(page);
  if (customPageData !== false) {
    return <CustomPage pageContext={customPageData} />;
  }

  return page === 'index' ? (
    <Index page={page} />
  ) : (
    <p style={{ marginTop: '250px' }}>whats up {page}</p>
  );
};

export async function getStaticPaths() {
  return {
    paths: [
      { params: { page: 'impressum' } },
      { params: { page: 'datenschutz' } },
    ],
    fallback: false, // See the "fallback" section below
  };
}

export async function getStaticProps({ params }) {
  return { props: { page: params.page } };
}

export default RoutingPage;

这会将单个页面生成为真正的 html 文件： 在此处输入图像描述

但这将我引向下一个问题：我在网页中实现了内部链接，如下所示： 在此处输入图像描述

它仍然引导用户myDomain.com/impressum，现在另外还有myDomain.com/impressum.html可用的。从 SEO 的角度来看，这是两条不同的路径。

我如何将它们统一起来，以便我只有一个路径 - 无论是从我的网页中打开它，还是直接输入它。

解决方法的想法 (??)

当然，我可以在任何地方使用类似的东西：

<Link href={`/${item.page}.html`}>

但这仅在页面导出并复制到服务器时才有效。因为这行不通，因为 .html 文件不存在......所以我在页面上工作时会丢失“页面预览” next dev。next start

所以我唯一的想法是为.env.development&设置一个 ENV-Variable.env.production并将 NEXT 中的 -Component 封装在 HOC 中。在那个 HOC 中，我可以检查我当前是否处于开发或生产中，并且不要将 .html 用于这些链接......否则将 .html 添加到链接中。

你说什么。您还有其他解决方案吗？

4

1 回答 1

0

我不知道它是否是state of the art，但我这样做的解决方法很少：

我将next/link-Component 放在 HOC 中并检查它是否在开发或生产中运行（process.env.NODE_ENV）：

import React from 'react';
import Link from 'next/link';

const LinkHoc = (props) => {
  const { as, href, children } = props;
  if (process.env.NODE_ENV === 'production') {
    return (
      <Link
        {...props}
        as={as ? `${as}.html` : ''}
        href={href ? `${href}.html` : ''}
      />
    );
  }
  return <Link {...props}>{children}</Link>;
};
export default LinkHoc;

使用此解决方法，您可以获得mydomain.com/impressumDEV 和mydomain.com/impressum.html生产中的链接。

至少要做的就是为生成的页面重命名 JSON 文件。他们在/out/_next/data/XYZranadomString/. 它们被命名为impressum.json，您需要将其重命名impressum.html.json为修复此文件在客户端的 404 错误。

希望看到更好的解决方案，所以如果您有任何建议，请告诉我！

于 2021-01-06T13:00:59.213 回答