Shipping Vurox with _app.js

Under the hood we ship react application with Next js framework. here app initialization folder _app.js. Which provides app configuration for Redux, Redux-thunk, Context for react app

Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:

  • Persisting layout between page changes

  • Keeping state when navigating pages

  • Custom error handling using componentDidCatch

  • Inject additional data into pages

To override the default App, create the file ./pages/_app.js as shown below:

import App, { Container } from 'next/app'
import { Provider } from 'react-redux'
import React from 'react'
import withRedux from 'next-redux-wrapper'
import configureStore from '../store'
import { VuroxContextProvider } from '../context'

import 'Styles/styles.less'
import 'antd/dist/antd.less'
import 'antd/dist/antd.dark.less'


class VuroxApp extends App{
	static async getInitialProps( { Component, ctx } ){
		let pageProps = {}
		if( Component.getInitialProps ){
			pageProps = await Component.getInitialProps(ctx)
		}
		return { pageProps}
	}

	render () {
	    const { Component, pageProps, store } = this.props
	    return(
	        <Provider store={store}>
						<VuroxContextProvider>
							<Component {...pageProps} />
						</VuroxContextProvider>
	        </Provider>
	    )
	}
}

export default withRedux(configureStore)(VuroxApp)

Last updated