Book Image

Real-World Next.js

By : Michele Riva
Book Image

Real-World Next.js

By: Michele Riva

Overview of this book

Next.js is a scalable and high-performance React.js framework for modern web development and provides a large set of features, such as hybrid rendering, route prefetching, automatic image optimization, and internationalization, out of the box. If you are looking to create a blog, an e-commerce website, or a simple website, this book will show you how you can use the multipurpose Next.js framework to create an impressive user experience. Starting with the basics of Next.js, the book demonstrates how the framework can help you reach your development goals. You'll realize how versatile Next.js is as you build real-world applications with step-by-step explanations. This Next.js book will guide you in choosing the right rendering methodology for your website, securing it, and deploying it to different providers, all while focusing on performance and developer happiness. By the end of the book, you'll be able to design, build, and deploy modern architectures using Next.js with any headless CMS or data source.
Table of Contents (19 chapters)
Part 1: Introduction to Next.js
Part 2: Hands-On Next.js
Part 3: Next.js by Example

Integrating Chakra UI in Next.js

Chakra UI is an open source component library used for building modular, accessible, and good-looking user interfaces.

Its main strengths are the following:

  • Accessibility: Chakra UI allows us to use pre-built components (such as buttons, modals, inputs, and many more) created by the Chakra UI team with extra attention to accessibility.
  • Themeable: The library ships with a default theme, where (for instance) buttons have a particular default background color, border radius, padding, and so on. We can always customize the default theme using Chakra UI built-in functions for editing every style of the library components.
  • Light and dark mode: They're both supported out of the box and can rely on the user's system settings. If users set their computer to use dark mode by default, Chakra UI will load the dark theme as soon as it loads.
  • Composability: We can create more and more components starting from the Chakra UI ones. The...