toomuchdesign / next-react-router Goto Github PK

View Code? Open in Web Editor NEW

51.0 51.0 15.0 275 KB

A documented attempt of using Next.js + react-router

License: MIT License

JavaScript 100.00%

nextjs react-router reactjs

next-react-router's People

Contributors

Stargazers

Watchers

Forkers

arth-kun antonioortiz jaydpather vietchaien glandisch laitlhadj ryolambert nirikshan henriquegomes6 etc-tiago fuyutarow jatin-groot alexshche mkinfrared taniyaminfoxeron

next-react-router's Issues

Async data prefetch for pages

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.

Obsolete approach

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! 🤙

TypeError: Cannot read property 'originalUrl' of undefined

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!!!!

What is the different between After.js?

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.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.