Next.js: Is there any root component somewhere we could override?

[Vincz]

Hi guys!

Coming from the "react universal starter kits" world, I'm pretty new to next.js but I like the "framework" approach.
The only thing I don't really get is where I can find the root "App" component ? Is there any way to override it ?
Usually, it's where I put all the stuff I need on an application level: Redux Store, Intl provider, Theme provider, Router, etc... and it's also where I handle the application events like "user logged in / user logged out", also where I put my "layout" stuff (header footer, ....) and where I handle my routing special cases (ex: https://reacttraining.com/react-router/web/example/modal-gallery - btw, is there any way to implement this with next ?).

Usually, I have two versions of this "root component", one for the server and one for the client. For example, in the server case, the redux store is populated from initial data, and in the client version, it is populated from a window.__REDUX_STATE__ or whatever variable coming from the server.

Here, to be honest, I don't really understand the redux integration example, there is no global wrapper for the entier app. Is the store recreated from scratch at each page change ?

I'm also wondering if there is any way to use the react router v4 instead of the next router ?

Thank for your clarifications

[sergiodxa]

Wow, a lot of questions, ok let me answers them.

1. You can't customize the root App component, but you can create a pages/_document.js to customize the server rendered Layout, this layout only works server side so it's not updated on client navigation and it doesn't run componentDidMount, etc.

2. Your redux store, intl provider, etc. can be placed in each page or you can create a high order component (that's my recommendation) which wrap your pages with your store, intl, etc. and render your page. Also your logged in/out logic can be placed in another (or the same) high order component.

3. Your layout stuffs like header and footer can be placed in a component <Layout /> and you can use it manually in each page. Something like this:

return (
  <Layout>
    <main>
      <h1>home page</h1>
    </main>
  </Layout>
)

And that will add a Header and Footer component for your page.

1. You don't need a root component for server and client rendering, the whole idea of Next.js is to write universal code, you create a pages/index.js for your / or pages/about.js for /about and put a static async getInitialProps, that static method allow you to universally fetch data from an API, then your page will render with that data as props.

2. Next.js will handle the re-hydratation when client rendering your server rendered app so you don't need to create a window.REDUX_STATE.

3. About the Redux example, it's weird, what it does is when server rendering create a new instance of the store and client side it create a new instance the first time, then re use it after every client page change.

4. You can't use react router, one of the core components of Next.js if it's router based on the file system and customizable with a custom server. I can assure you you will not need react router anymore with Next.js, I have never felt I needed it again.

About the example you linked, check -> https://github.com/zeit/nextgram (https://nextgram.now.sh/) which is exactly that example but with Next.js.

Remember this is a framework, not a boilerplate. It will handle a lot of thing for you in exchange of following some rules.

[Vincz]

Thank you very much for taking the time to answer clearly to all of this. You're amazing. Thanks to you, I really have a better understanding of the way next works and I'll definitely give it a try.

[arunoda]

Thanks @sergiodxa for the great answer.