toomuchdesign / next-react-router Goto Github PK
View Code? Open in Web Editor NEWA documented attempt of using Next.js + react-router
License: MIT License
A documented attempt of using Next.js + react-router
License: MIT License
I wonder if there is any way to prefetch data during SSR like NextJS provides convenient SomePage.getInitialProps
functionality following the approach?
Btw, Great job! Iโve been dreaming about NextJS+RR for couple months.
PSA for the community: since the release of Next.js 9.5 the custom server (/server.js
) approach to this is no longer recommended by the Next.js team. Instead you should use rewrites
in next.config.js
. [EDIT: It was never recommended ๐]
I wrote up a detailed guide on how to do this with v9.5+ (it's still surprisingly tricky): Building a SPA with Next.js and React Router. You can also see a working example in this repo. Happy hacking!
@toomuchdesign โ thanks for the great resource! I used this approach for several projects back in 2019. Though since this repo ranks highly on Google for "nextjs react router" and similar queries, it might make sense to refactor the code to use rewrites or add a notice in the README so people don't write a custom server unnecessarily. Thanks again for your great work on this! ๐ค
Hi there! Thank you for creating this integration!
To give you some background I was trying to use the vanilla next-router with semantic-ui-react (one of their menu components had some weird behavior), but couldn't get it to work.
Your solution is working mostly but I am getting
I am getting TypeError: Cannot read property 'originalUrl' of undefined
This is the full error:
VM47 main.js:11109 Error in error page `getInitialProps`: TypeError: Cannot read property 'originalUrl' of undefined
at getInitialProps$ (VM44 _app.js:92714)
at tryCatch (VM47 main.js:768)
at Generator.invoke [as _invoke] (VM47 main.js:997)
at Generator.prototype.<computed> [as next] (VM47 main.js:820)
at tryCatch (VM47 main.js:768)
at invoke (VM47 main.js:858)
at VM47 main.js:893
at new Promise (<anonymous>)
at new F (VM47 main.js:2587)
at callInvokeWithMethodAndArg (VM47 main.js:892)
at AsyncIterator.enqueue [as _invoke] (VM47 main.js:915)
at AsyncIterator.prototype.<computed> [as next] (VM47 main.js:820)
at Object.push../node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js.exports.async (VM47 main.js:942)
at Function.getInitialProps (VM44 _app.js:92709)
at VM44 _app.js:56168
at step (VM44 _app.js:56086)
at Object.next (VM44 _app.js:56067)
at VM44 _app.js:56061
at new Promise (<anonymous>)
at push../node_modules/next-redux-wrapper/es6/index.js.__awaiter (VM44 _app.js:56057)
at Function._a.getInitialProps (VM44 _app.js:56148)
at loadGetInitialProps$ (VM47 main.js:10327)
at tryCatch (VM47 main.js:768)
at Generator.invoke [as _invoke] (VM47 main.js:997)
at Generator.prototype.<computed> [as next] (VM47 main.js:820)
at tryCatch (VM47 main.js:768)
at invoke (VM47 main.js:858)
at VM47 main.js:893
at new Promise (<anonymous>)
at new F (VM47 main.js:2587)
at callInvokeWithMethodAndArg (VM47 main.js:892)
at AsyncIterator.enqueue [as _invoke] (VM47 main.js:915)
at AsyncIterator.prototype.<computed> [as next] (VM47 main.js:820)
at Object.push../node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js.exports.async (VM47 main.js:942)
at Object.loadGetInitialProps (VM47 main.js:10285)
at Router.getInitialProps (VM47 main.js:10016)
at VM47 main.js:9800
at new Promise (<anonymous>)
at new F (VM47 main.js:2587)
at VM47 main.js:9799
Could you take a look? This is my repo.
Thanks!!!!
Hi ๐๐ผ
I'm probably wondering and would like to know the difference between your work and After.js?
is it just like "the seperated part" tool? Btw great work and I'm looking forward.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.