There are many reasons to use React
6A42
Router inside a Next.js project! React Router is far more flexible than Next's router and makes it easy to share layout and state between among routes, even deeply nested ones. Doing this with Next.js requires consolidating all your shared logic in a custom _app.tsx component and using complicated layout hacks.
If you're building a single-page application and SEO isn't a concern, using React Router with Next.js is a powerful combination. Unfortunately there is no guidance for how to do this provided by th Next.js team. This repo demonstrates how this can be achieved.
For the full description of this project, go to https://colinhacks.com/essays/building-a-spa-with-nextjs.
The basic idea:
-
Create a custom App (
/pages/_app.tsx) -
Return
nulliftypeof window === "undefined". This is required to prevent react-router from throwing errors during the SSR step!
// 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;- Rewrite all routes to the homepage
// next.config.js
module.exports = {
async rewrites() {
return [
// Rewrite everything else to use `pages/index`
{
source: '/:path*',
destination: '/',
},
];
},
};Go to https://colinhacks.com/essays/building-a-spa-with-nextjs for more details.
Feel free to tweet questions to me @colinhacks 🤙