Introduction to Next.js

Next.js is a framework for React (yep, a framework for a framework) and simplifies React development, but also adds new features that are fairly easy to use:

• File-based routing
• SSR and SSG
• Internationalization
• Image Optimization
• Analytics
• Less configuration (less boilerplate code)
• Built-in component-scoped styling and SASS support
• Create API endpoint for backend functionality

Server-Side Rendering (SSR)

Before sending the website to the browser, it gets prerender on the server. This has the following advantages:

• Better Search Engine Optimization
• Servers are faster than client's browser -> faster loading
• dynamic html meta tags, for example for structured data

Static Site Generation (SSG)

When running in SSG mode, static sites are output, so you don't need a server running.

Unlike normal SPAs like when using normal React, however, the sites are delivered empty to the user. Instead, the HTML is delivered pre-prerendered to the user

• Lower costs
• Easy deployments to CDNS
• Better SEO and performance than non-pre-rendered SPAs