All Projects → colinhacks → nextjs-react-router

colinhacks / nextjs-react-router

Licence: other
A demonstration of how to use React Router inside Next.js

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to nextjs-react-router

React Static Complete Website
A complete website built using React JS, With SEO, Code Splitting, Pre-rendering, gzip and more.
Stars: ✭ 16 (-75%)
Mutual labels:  spa, react-router
edliz
This 7th essential medicines list and standard treatment guidelines for the most common health conditions in Zimbabwe has been endorsed by the National Medicine & Therapeutics Policy Advisory Committee [NMTPAC]. It is the product of many years of combined efforts by hundreds of health workers at all levels of the health care system in Zimbabwe. …
Stars: ✭ 25 (-60.94%)
Mutual labels:  spa, react-router
Productivity Frontend
Productivity Application - Kanban Style Productivity Management Application with Customizable Boards, Lists and Cards to Make You More Productive.
Stars: ✭ 234 (+265.63%)
Mutual labels:  spa, react-router
Ice
🚀 The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
Stars: ✭ 16,961 (+26401.56%)
Mutual labels:  spa, react-router
Preact Redux Isomorphic
preact-redux-isomorphic PWA SPA SSR best practices and libraries in under 80kB page size (for live demo click the link below)
Stars: ✭ 85 (+32.81%)
Mutual labels:  spa, react-router
Award
⚙基于react的服务端渲染框架
Stars: ✭ 91 (+42.19%)
Mutual labels:  spa, react-router
laravel-react-spa
A Laravel-React SPA starter project template.
Stars: ✭ 94 (+46.88%)
Mutual labels:  spa, react-router
wordpress-svelte
Frontend writen on svelt
Stars: ✭ 17 (-73.44%)
Mutual labels:  spa
Oud
🎵 The frontend of Oud, an online music streaming service that is a mimic of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.
Stars: ✭ 48 (-25%)
Mutual labels:  react-router
use-react-router-breadcrumbs
tiny, flexible, hook for rendering route breadcrumbs with react-router v6
Stars: ✭ 170 (+165.63%)
Mutual labels:  react-router
react-micro-blog
🛠🛠🛠 A Simple Front-end React Application which Acts as a Complete Blog 🛠🛠🛠
Stars: ✭ 28 (-56.25%)
Mutual labels:  react-router
cnode-react-app
基于react的仿cnode社区项目
Stars: ✭ 17 (-73.44%)
Mutual labels:  react-router
nav-state-react-router
📕 Article Repo: Maintaining Navigation State with React-Router and Redux
Stars: ✭ 18 (-71.87%)
Mutual labels:  react-router
React-Native-Showcase
Best List of Open Source / Examples / Free / Case Study & Featured Template React Native Apps
Stars: ✭ 39 (-39.06%)
Mutual labels:  react-router
angolans-on-github
Software Developers based in Angola 🇦🇴
Stars: ✭ 18 (-71.87%)
Mutual labels:  spa
ReactCnodeJS
☀️React 初/中级项目,CnodeJS社区重构 (a junior project, rewrite cnodejs.org ) 🌟 DEMO:
Stars: ✭ 66 (+3.13%)
Mutual labels:  react-router
react-ssr
从零搭建一个react-ssr框架 解决页面js事件 样式同构 服务器客户端路由 数据注水脱水等问题
Stars: ✭ 42 (-34.37%)
Mutual labels:  react-router
coconat
🍥 StarterKit Builder for rocket-speed App creation on 🚀 React 17 + 📙 Redux 4 + 🚠 Router 5 + 📪 Webpack 5 + 🎳 Babel 7 + 📜 TypeScript 4 + 🚔 Linters 23 + 🔥 HMR 3
Stars: ✭ 95 (+48.44%)
Mutual labels:  react-router
schema.tl
📜 Easy-to-use TL-Schema viewer
Stars: ✭ 55 (-14.06%)
Mutual labels:  spa
laravel-micro-spa-boilerplate
An "Advanced" SPA Boilerplate featuring a dark themed UI that's integrated with LaravelMicro.js, Vue.js, TailwindCSS & Laravel PHP Framework.
Stars: ✭ 23 (-64.06%)
Mutual labels:  spa

Building a single page application with Next.js and React Router

There 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.

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 approach

The basic idea:

  1. Create a custom App (/pages/_app.tsx)

  2. Return null if typeof 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;
  1. 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 🤙

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].