Next.js Integration

Next.js is a popular open-source React framework used for building modern web applications. It provides a set of out-of-the-box features that simplifies the development process, such as server-side rendering, automatic code splitting, and optimized performance. With Next.js, developers can create fast and scalable web applications while maintaining a great user experience.

One of the main benefits of Next.js is its ability to enable server-side rendering, which improves the application's performance by pre-rendering pages on the server before sending them to the client. This reduces the initial page load time, improves SEO, and enhances the user experience. Next.js also provides automatic code splitting, which allows developers to optimize the loading time of their web application by breaking down the code into smaller chunks and only loading the necessary code for each page. Additionally, Next.js offers a wide range of plugins, integrations, and support for multiple data sources, making it a versatile framework that can meet the needs of various types of web applications.

info

This guide assumes Next.js 13 or higher, but most of the code we'll add should be fine from Next.js 12 and up.

Integrating the SDK

Following on from the Getting Started guide there are several steps we need to take now that we have the SDK installed.

• Create several API routes wrapped with the withWithWineSessionApiRoute HOF to handle various steps of the Authorization Flow
• Add some Register, Login and Logout links to the navigation
• Add a fetch in a getServerSideProps method wrapped with the withWithWineSessionSsr session HOF
• Add Next.js specific configuration to the withwine.config.json file (what we add or if we add it at all will depend on which way we decide to implement API Route Redirects)
• Augment next.config.js with the custom configuration