State Management & More

Redux provides a shared state store, but adding it can make an app more complex. Learn Next.js recommends checking whether component state or a top-level component can meet the need first. For Next.js apps that do use Redux, the module shows wrapping only the pages that need it so other pages can still be statically rendered.

React Context lets components access shared values without passing them through every layer as props. Learn Next.js compares Redux’s developer tools, middleware, and performance options with Context and React’s useReducer hook. In a Day Drink example, a search context grows to hold the search term, selected day, location, and deal filters, which components read through a useSearch hook.

Learn Next.js describes TypeScript as a way to gain confidence when refactoring, while noting that teams need to account for its learning curve. The setup shown starts with a tsconfig file and installing TypeScript and React types; Next.js then fills in the configuration and creates next-env.d.ts. The module also covers typing props and using Next.js types for pages, components, and API routes, plus generating types from a GraphQL schema.

Dynamic imports can defer code until runtime, which can help keep it out of the initial page load. Learn Next.js also describes using one to load React Select without server-side rendering when the library caused styling problems. The feature is presented as useful for specific cases rather than a routine requirement.