concept Next.js in category node

This is an excerpt from Manning's book Next.js in Action MEAP V02. Login to get full access to this book.

Next.js is a lightweight framework that makes decisions for you, but in a way that’s as unobtrusive as possible. The aim of Next.js is to facilitate building any type of application using React components, while taking care of the stuff that most React applications have in common. For example, Next.js doesn’t care if you want to use Material-UI for your UI or if prefer one pattern over another for implementing your React components. This chapter is an introduction to the core ideas of Next.js. We’ll look what all React applications have in common, dive into the concepts that define what Next.js is and how it can help you, then contrast this with the status quo for building React applications.

Listing 5.34: CSS generated by Next.js from CSS modules and inserted into the browser

<style>
  div.listing-14_root__1Lrk9 > p:first-of-type {
    font-weight: bold;
  }
 
  div.listing-14_root__1Lrk9 > p:last-of-type {
    font-style: italic;
  }
 
  .listing-14_root__1Lrk9 span {
    text-decoration: underline;
  }
</style>

copy

This is an excerpt from Manning's book Isomorphic Web Applications: Universal Development with React. Login to get full access to this book.

If you’re looking for an all-in-one solution that uses React, Next.js is a strong option. Isomorphic by default, Next.js uses a convention-driven approach to building a React app. Even if you decide not to use Next.js in production, you may find it a good tool for building isomorphic prototypes or proofs of concept (pocs). It could aid you in selling the idea of isomorphic to your team or boss.

Figure 12.11 walks through the isomorphic flow as implemented by Next.js. Next.js is server rendered by default, so you don’t have to configure anything!

Figure 12.11. The isomorphic flow with Next.js

12.4.3. Pros and cons of Next.js

Overall, Next.js provides a great solution if you want to try something quickly or if you have a simple app with just a few pages. For complex apps with dynamic routing, Next.js requires more time investment to get up and running.