NEXT.JS 13: Be Dynamic Without Limits

NextJS13 was just released, and as of now, all tutorials present online have become outdated. Therefore, this article will get into NextJS and explore the NextJS 13 newly introduced features.

Instead of optimizing for single-page applications, NextJS is designed for teams building ambitious, complex applications.

A Guide to the Next JS Framework

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 head part 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 reloading in 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.