Next.js is a framework extensively used by TikTok, Twitch mobile, Nike, IGN, PlayStation, Marvel, and many others. It offers all the functionality we need to deploy our application in production, with a hybrid system with static pages and server-side rendered (SSR) pages. It has support for Typescript and can be deployed without having to configure anything.
SSR Benefits (Next.js)
- Performance
- Isomorphic: Works on both server and client (browser)
- Build: Next.js in the build retrieves the necessary data and ejects HTML with React components.
- Static export: Compile static files to be able to upload to the server
- 0 config (No need to configure anything to deploy Next, however it has a very extensible config)
- Api routes
- Deploy with Vercel
- Next head: To modify the
headpart of the page to improve the SEO - Typescript support
- Environment variables are used in the browser code, not just server code.
- Fast Refresh: New experience of
hot reloadingin React components - Code splitting: loads chunk corresponding to the page path
Comparison With Gatsby
Gatsby is primarily used for building websites that generate static HTML content and web pages that have a fixed or predictable number of pages and stable content. An example might be an e-commerce site that has only 50 products available for sale.