I would like to refactor my Next.js webapp to have different pages handle different screens. Currently, I have this component holding several states to know in which screen I'm in. In the jsx section, I'm using {value && ... } to render the right component.

But I feel this is not good design, and won't be maintainable when adding more and more screens.

I would also like to avoid Redux as it is overkill for my project.

I was thinking about persisting data in cookies so I can retrieve them with getInitialProps in every component when rendering a new page, but is there a more elegant way?

I've read about tweaking the _app.js but I'm not sure to understand the consequences of doing so, and how it could help me..

Any suggestion?

I would like to refactor my Next.js webapp to have different pages handle different screens. Currently, I have this component holding several states to know in which screen I'm in. In the jsx section, I'm using {value && ... } to render the right component.

But I feel this is not good design, and won't be maintainable when adding more and more screens.

I would also like to avoid Redux as it is overkill for my project.

I was thinking about persisting data in cookies so I can retrieve them with getInitialProps in every component when rendering a new page, but is there a more elegant way?

I've read about tweaking the _app.js but I'm not sure to understand the consequences of doing so, and how it could help me..

Any suggestion?

• javascript
• reactjs
• next.js
• react-state-management

• Are you using an express server or serverless functions with next.js. Do you have any webpages you want to protect? Is the data you want coming from a database that has anything to do with user authentication. – javascwipt Commented May 30, 2020 at 7:53
• Have you thought of using the Context API and hooks? – Ajay Yadav Commented May 30, 2020 at 8:44
• react-router ?? – xadm Commented May 30, 2020 at 10:44
• @UzairAshraf backend in golang with graphql on top of mysql. yes I want to protect some pages (although the one I'm concerned with in my question are not). current data not related to the user auth. – Binajmen Commented May 30, 2020 at 11:44
• @AjayYadav Are you suggesting to use useContext() to manage the view selection, or to persist data from one page to another? – Binajmen Commented May 30, 2020 at 11:45

1 Answer 1

When multiple of your pages need to make use of same data, you can make use of Context to store the result. It a good way to make a centralized storage without using complex and more self sufficient libraries like redux

You can implement context inside of _app.js file which must reside inside your root folder. This way next.js treats it as a root wrapper and you would just need to use 1 instance of Context

contexts/appContext

import React from 'react';
const AppContext = React.createContext();
export const AppProvider = AppContext.Provider;
export const AppConsumer = AppContext.Consumer;
export default AppContext;

_app.js

import React from 'react'
import App from 'next/app'
import AppProvider from '../contexts/appContext';
class MyApp extends App {
  state={
    data:[]
  }
  render() {
    const { Component, pageProps } = this.props;
    // You can implement logic in this component to fetch data and update state
    return (
      <div>
        <AppProvider value={this.state.data}> // pass on value to context
          <Component {...pageProps} />
        </AppProvider>
      </div>
    )
  }
}
export default MyApp

Now further each component can make use of context value by using AppConsumer or using useContext if you use hooks

Please read more about how to use Context here