Lee Robinson - Next.js Metamorphosis, React Summit 2023

React

Next.js Metamorphosis: Unlock the Power of Next.js App Router, API Routes, and hooks to build fast, scalable, and maintainable applications.

Key takeaways

Next.js Metamorphosis is a transformation of a Next.js app from a past version to a new, improved version.
The app router allows for a declarative way to define routes and layouts, making it easier to manage complex applications.
The app router also allows for caching and revalidating data, making it easy to update data on the client-side.
Next.js’ API route can be used to handle data fetching and management, making it easier to fetch data and render it in components.
Use state and use effect can be used to manage state and perform side effects in components.
The use client directive can be used to mark a component as running on the client-side, allowing for flexible rendering and management of data.
The getStaticProps function can be used to fetch data on the server-side and pre-render pages, making it easier to manage data and improve performance.
The getServerSideProps function can be used to fetch data on the server-side and render pages dynamically.
The app router allows for nested layouts and reusable components, making it easy to create complex pages and layouts.
The settings layout component can be reused across multiple pages, making it easy to manage layout and design.
The app router allows for incremental updates of data, making it easy to update data on the client-side without having to reload the page.
The useEffect hook can be used to perform side effects and update data in components, making it easy to manage complex data and state.
The useMemo hook can be used to memoize data and improve performance, making it easy to optimize data fetching and rendering.
The getNextData function can be used to get the next set of data and update the component, making it easy to handle pagination and page transitions.

Lee Robinson - Next.js Metamorphosis, React Summit 2023

More talks