Next.JS单页应用？

Question

我正在尝试在 NextJS 中制作一个单页应用程序，但我开始认为这是不可能的。谁能告诉我怎么做？

我的第一次尝试是使用哈希路由器：

<HashRouter>
                <div>
                    <NavLink to="/">Home</NavLink>
                    &nbsp;&nbsp;
                    <NavLink to="/purchaseComplete">Purchase Complete</NavLink>
                </div>    
                <div>
                    <Route exact path="/" Component={Default} />      
                    <Route path="/purchaseComplete" Component={PurchaseComplete} />
                </div>
            </HashRouter>

但是在浏览器中我看到“不变失败：浏览器历史需要一个 DOM”

然后我尝试使用 StaticRouter：

<StaticRouter location="/" context={staticContext}>
                <div>
                    <NavLink to="/">Home</NavLink>
                    &nbsp;&nbsp;
                    <NavLink to="/purchaseComplete">Purchase Complete</NavLink>
                </div>    
                <div>
                    <Switch>
                        <Route exact path="/" Component={Default} />              
                        <Route path="/purchaseComplete" Component={PurchaseComplete} />
                    </Switch>
                </div>
            </StaticRouter>

这将呈现两个链接，但单击它们时没有任何反应。

在 NextJS 教程中，他们在开始时讨论了 SPA，但随后他们只向您展示了如何制作具有多个页面的应用程序。

我开始认为在 NextJS 中构建 SPA 是不可能的。任何人都可以证实这一点吗？或者有人可以告诉我如何在 Next JS 中构建 SPA？

Answer 1

如果您使用Next.js 9.5或更高版本的正确的方式做，这是重新写入。不要使用自定义服务器，它会使维护和部署您的站点变得更加困难，而且在这里没有必要。

此处提供了有关如何执行此操作的详细教程。基本思路：

1. 创建自定义应用程序 ( /pages/_app.tsx)

2. 返回null如果typeof window === "undefined"。这是防止 react-router 在 SSR 步骤中抛出错误所必需的！

// pages/_app.tsx

import { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {
  return (
    <div suppressHydrationWarning> // <- ADD THIS
      {typeof window === 'undefined' ? null : <Component {...pageProps} />}
    </div>
  );
}

export default App;

3. 重写所有到首页的路由

// next.config.js

module.exports = {
  async rewrites() {
    return [
      // Rewrite everything else to use `pages/index`
      {
        source: '/:path*',
        destination: '/',
      },
    ];
  },
};

在链接的教程中有更多的上下文/解释，但这会让你开始。

Answer 2

我找到了一篇回答这个问题的博客文章：https : //dev.to/toomouchdesign/next-js-react-router-2kl8

事实证明，Next.Js 旨在用于多页应用程序。

作者解释了如何使用 React Router 使用 Next.JS 制作单页应用程序。然而，他也表示 Next.JS 作者回应并表示他们不打算以这种方式使用 Next.JS！

我完全同意作者的观点，并在我的应用程序中使用他的方法。我想要 NextJS 的服务器端渲染，但也希望它是一个单页应用程序。