Hello dev!

The goal of this post is to explain a little bit about what Next.js is and what we can do with it.

What is Next.js?

It’s a React Framework for Production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Advantages

Next.js has several tools to help you, some of them:

Image optimization: With Next.js we can replace the <img src="" /> tag with the <Image src="" /> component, which brings a variety of optimizations such as loading only the size that’s needed, and only when the image is actually used.

Next.js Analytics: When you deploy your app on Vercel you get access to a real-time analytics tool, so you can measure the number of visitors, page load time, and more.

Zero Config: With a single terminal command, a ready-to-go project structure is created.

CSS and CSS Modules support: CSS Modules let us scope our CSS to avoid collisions.

Routing: Navigating between pages is very simple: just create a new file named after the page you want and the router recognizes it as a page.

API Routes: With routes you can create endpoints that return information to your app.

Hybrid SSG and SSR: SSR (Server Side Render):

When we request a user profile page, for example, the server performs the necessary lookups in the application and database, and returns ready-to-display HTML to the browser.

Source: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/ (in Portuguese)

• SSG (Static Site Generator):

These are sites without dynamic content, such as a company’s presentation page.

Source: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/ (in Portuguese)

How to learn Next.js

The Next.js site itself (https://nextjs.org/learn/basics/create-nextjs-app) has an interactive course covering the fundamentals of Next.js, how to monitor performance, SEO and other features.

References

Nextjs.org What’s the difference between SSR and SSG (in Portuguese)