{"id":16903837,"url":"https://github.com/colinhacks/nextjs-react-router","last_synced_at":"2025-03-17T06:32:08.181Z","repository":{"id":39453478,"uuid":"308227470","full_name":"colinhacks/nextjs-react-router","owner":"colinhacks","description":"A demonstration of how to use React Router inside Next.js","archived":false,"fork":false,"pushed_at":"2023-03-08T06:56:47.000Z","size":107,"stargazers_count":154,"open_issues_count":5,"forks_count":30,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-16T09:12:44.111Z","etag":null,"topics":["nextjs","react-router","spa"],"latest_commit_sha":null,"homepage":"https://vriad.com/essays/building-a-spa-with-nextjs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colinhacks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-29T05:31:04.000Z","updated_at":"2025-03-15T09:53:43.000Z","dependencies_parsed_at":"2024-10-27T12:14:12.651Z","dependency_job_id":"574d7f3f-8b18-4739-8eb0-72009e842c4a","html_url":"https://github.com/colinhacks/nextjs-react-router","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinhacks%2Fnextjs-react-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinhacks%2Fnextjs-react-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinhacks%2Fnextjs-react-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinhacks%2Fnextjs-react-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colinhacks","download_url":"https://codeload.github.com/colinhacks/nextjs-react-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243986367,"owners_count":20379315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react-router","spa"],"created_at":"2024-10-13T18:28:57.585Z","updated_at":"2025-03-17T06:32:06.039Z","avatar_url":"https://github.com/colinhacks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Building a single page application with Next.js and React Router\n\nThere are many reasons to use React 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](https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/).\n\nIf 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.\n\nFor the full description of this project, go to [https://colinhacks.com/essays/building-a-spa-with-nextjs](https://colinhacks.com/essays/building-a-spa-with-nextjs).\n\n### The approach\n\nThe basic idea:\n\n1. Create a custom App (`/pages/_app.tsx`)\n\n2. Return `null` if `typeof window === \"undefined\"`. This is required to prevent react-router from throwing errors during the SSR step!\n\n```tsx\n// pages/_app.tsx\n\nimport { AppProps } from 'next/app';\n\nfunction App({ Component, pageProps }: AppProps) {\n  return (\n    \u003cdiv suppressHydrationWarning\u003e // \u003c- ADD THIS\n      {typeof window === 'undefined' ? null : \u003cComponent {...pageProps} /\u003e}\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n3. Rewrite all routes to the homepage\n\n```tsx\n// next.config.js\n\nmodule.exports = {\n  async rewrites() {\n    return [\n      // Rewrite everything else to use `pages/index`\n      {\n        source: '/:path*',\n        destination: '/',\n      },\n    ];\n  },\n};\n```\n\nGo to [https://colinhacks.com/essays/building-a-spa-with-nextjs](https://colinhacks.com/essays/building-a-spa-with-nextjs) for more details.\n\nFeel free to tweet questions to me [@colinhacks](https://twitter.com/colinhacks) 🤙\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinhacks%2Fnextjs-react-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolinhacks%2Fnextjs-react-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinhacks%2Fnextjs-react-router/lists"}