Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Real-World Next.js

You're reading from   Real-World Next.js Build scalable, high-performance, and modern web applications using Next.js, the React framework for production

Arrow left icon
Product type Paperback
Published in Feb 2022
Publisher Packt
ISBN-13 9781801073493
Length 366 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Michele Riva Michele Riva
Author Profile Icon Michele Riva
Michele Riva
Arrow right icon
View More author details
Toc

Table of Contents (19) Chapters Close

Preface 1. Part 1: Introduction to Next.js
2. Chapter 1: A Brief Introduction to Next.js FREE CHAPTER 3. Chapter 2: Exploring Different Rendering Strategies 4. Chapter 3: Next.js Basics and Built-In Components 5. Part 2: Hands-On Next.js
6. Chapter 4: Organizing the Code Base and Fetching Data in Next.js 7. Chapter 5: Managing Local and Global States in Next.js 8. Chapter 6: CSS and Built-In Styling Methods 9. Chapter 7: Using UI Frameworks 10. Chapter 8: Using a Custom Server 11. Chapter 9: Testing Next.js 12. Chapter 10: Working with SEO and Managing Performance 13. Chapter 11: Different Deployment Platforms 14. Part 3: Next.js by Example
15. Chapter 12: Managing Authentication and User Sessions 16. Chapter 13: Building an E-Commerce Website with Next.js and GraphCMS 17. Chapter 14: Example Projects and Next Steps for Learning More 18. Other Books You May Enjoy

Comparing Next.js to other alternatives

As you may be wondering, Next.js is not the only player in the server-side rendered JavaScript world. However, alternatives might be considered depending on the final purpose of a project.

Gatsby

One popular alternative is Gatsby. You may want to consider this framework if you seek to build static websites. Unlike Next.js, Gatsby only supports static site generation and does it incredibly well. Every page is pre-rendered at build time and can be served on any Content Delivery Network (CDN) as a static asset, allowing the performance to be incredibly competitive compared to dynamically server-side rendered alternatives. The biggest downside of using Gatsby over Next.js is that you'll lose the ability of dynamic server-side rendering, which is an important feature for building more dynamically data-driven and complex websites.

Razzle

Less popular than Next.js, Razzle is a tool for creating server-side rendered JavaScript applications. It aims to maintain the ease of use of create-react-app while abstracting all the complex configurations needed for rendering the application both on the server and client sides. The most significant advantage of using Razzle instead of Next.js (or the following alternatives) is that it is framework agnostic. You can choose your favorite frontend framework (or language), such as React, Vue, Angular, Elm, or Reason-React… it's your choice.

Nuxt.js

If you have experience with Vue, then Nuxt.js can be a valid Next.js competitor. They both offer support for server-side rendering, static site generation, progressive web app management, and so on, with no significant differences regarding performance, SEO, or development speed. While Nuxt.js and Next.js serve the same purpose, Nuxt.js needs more configuration, which is sometimes not a bad thing. In your Nuxt.js configuration file, you can define layouts, global plugins and components, routes, and so on, while with Next.js, you need to do it the React way. Apart from that, they share many functionalities, but the most significant difference is the library underneath. That said, if you already have a Vue component library, you could consider Nuxt.js for server-side rendering it.

Angular Universal

Of course, Angular has also made its move to the JavaScript server-side rendering scene, and it proposes Angular Universal as an official way for server-side rendering Angular applications. It supports both static site generation and server-side rendering and, unlike Nuxt.js and Next.js, it was developed by one of the biggest companies out there: Google. So if you are into Angular development and already have some components written with that library, Angular Universal can be a natural alternative to Nuxt.js, Next.js, and other similar frameworks.

So, why Next.js?

We've now seen some popular alternatives to Next.js, and their strengths and weaknesses.

The main reason why I'd suggest using Next.js instead of any other framework is because of its incredible feature set. With Next.js, you get everything you need right out of the box, and I'm not only referring to components, configurations, and deployment options, although they're probably the most complete I've ever seen.

In addition, Next.js has an incredibly welcoming and active community ready to support you at every step you take in building your application. I would consider this as a huge bonus point, because as soon as you have a problem with your code base, you'll be able to get help from the massive community across many different platforms, including StackOverflow and GitHub, where the Vercel team is also often involved in discussions and support requests.

Now that you know how Next.js competes with other similar frameworks, let's see the main differences between a default client-side React app and a fully-featured server-side environment for rendering your JavaScript code base dynamically for each request, and statically at build time.

You have been reading a chapter from
Real-World Next.js
Published in: Feb 2022
Publisher: Packt
ISBN-13: 9781801073493
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime