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.

Real-World Next.js

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

Preface

A Brief Introduction to Next.js

When talking about rendering strategies, we refer to how we serve a web page (or a web application) to a web browser. There are frameworks, such as Gatsby (as seen in the previous chapter), that are incredibly good at serving statically generated pages. Other frameworks will make it easy to create server-side rendered pages.

Exploring Different Rendering Strategies

Next.js is not only about server-side rendering. It provides some incredibly useful built-in components and functions that we can use to create performant, dynamic, and modern websites.

Next.js Basics and Built-In Components

Organizing the Code Base and Fetching Data in Next.js

State management is one of the central parts of any React application, Next.js apps included. When talking about state, we refer to those dynamic pieces of information that allow us to create highly interactive user interfaces ( UIs ), making our customers' experience as beautiful and enjoyable as possible.

Managing Local and Global States in Next.js

What makes the difference between a great and a bad UI? Some people may answer "features!" and others may say "speed of interaction!" but I would personally define it as a good combination of a great design and ease of use. Your web application could potentially be the most powerful app in the world. Still, it would be difficult for your users to make it work as intended if the UI is not well designed and implemented. So here comes the concept of styling.

CSS and Built-In Styling Methods

In the previous chapter, we saw how Next.js can improve our productivity by giving us many valid alternatives for writing CSS without the need to install and configure many different external packages.

Using UI Frameworks

Next.js is an incredibly powerful framework. In the first seven chapters of this book, we've been able to create some nice server-side rendered web applications without really caring about tweaking and customizing the web server. Of course, there are few chances for us to discuss implementing a Next.js application inside an Express.js or Fastify server in a real-life scenario, but knowing how to do so is likely to be handy on many occasions.

Using a Custom Server

Testing is an essential part of the whole development workflow. It gives you more assurance that you're not introducing bugs into your code, as well as that you're not breaking any existing features.

Testing Next.js

SEO (short for Search Engine Optimization ) and performances are two topics that go hand in hand during the development process as a whole.

Working with SEO and Managing Performance

In the previous chapters, we saw how Next.js works, how to optimize it for SEO, how to deal with performance, how to adopt UI frameworks, and how to fetch data on both the client and server sides, eventually being able to create a fantastic web application. But then, we have a problem: how should we ship it to production? There are many different hosting providers, cloud platforms, and even Platform as a Service ( PaaS ) solutions out there; how do we pick one?

Different Deployment Platforms

Managing Authentication and User Sessions

During our journey exploring Next.js, we've learned a lot. We've explored different rendering methodologies, styling techniques, integrations, and even deployment strategies.

Building an E-Commerce Website with Next.js and GraphCMS

We're about to reach the end of our journey, and it has been a crazy ride so far.

Real-World Next.js

Details

Description

Creator

Michele Riva

Content

Reviews

Frequently Asked Questions

Real-World Next.js