Gå til hovedinnhold

NextJS Quick Start Guide

🚀 The Book in 3 Sentences

This book is to quickly get started on the NextJS framework and understand how it works. It is about all things related to making an app and understanding how to react, and nextjs works. It also does a lot of introductory to topics such as redux, babel etc.

🎨 Impressions

For me it got a bit complicated and not that interesting quickly. Some things I liked but to be honest I think it became rather too little depth of the topics and not enough

✍️ My Top Quotes

  • There have been studies that clearly show the correlation between the load time and page views, conversion, and other vital metrics. On average, customers leave the page if it fails to load within 2-3 seconds.

  • Another big issue is search engine optimization (SEO). Search engines tend to give higher ranks to pages that load quicker. Plus, only recently have crawlers learned how to parse and crawl SPAs properly.

  • To decrease code duplication, we would like to use the same technology and the same templates both on the client and on the server. Such an app is called universal or isomorphic.

  • Luckily, React is built with two main concepts in mind: it's state driven and it is capable of rendering to plain HTML.

  • Nowadays, there are few competitors in the React-based server-side rendering market. We can divide them into the following categories: Drop-in dynamic solutions (Next.js, Electrode, After) Drop-in static solutions (Gatsby, React Static) Custom solutions

  • A static solution makes a static HTML build (with all possible router pages), and then this build can be served by a static server such as Nginx, Apache, or any other. All HTML is pre-baked, as well as the initial state. This is very suitable for websites with incremental content updates that happen infrequently, for example, for a blog.

  • The dynamic solution generates HTML on the fly every time the client requests it. This means we can put in any dynamic logic, or any dynamic HTML blocks such as per-request ads and so on. But the drawback is that it requires a long-running server.

  • Generally speaking, it's better to refer to images from CSS so that the entire presentation layer is configured in one place. It's usually a red flag when you want to insert an image in a JS component. We're not talking about image URLs coming from API responses; those are always inserted dynamically