NEXT.JS

Powered by the American company Vercel, Next.js is an open-source React framework that allows you to develop full-stack web applications. What this means is that it brings together a comprehensive set of tools and language features that let you control both the front and back ends, without utilizing different technologies separately. Used by many big companies such as Netflix, Uber, The Wahington Post, JPMorgan Chase, and Loom, it represents the pinnacle of modern web technology in many ways.

The main features of Next.js include:

  1. A file-system-based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more. Next.js maps the directories and files on the server to the URL paths according to the original hierarchical structure, simplifying the process of routing management.

  2. Client-side and Server-side Rendering with Client and Server Components, further optimized with static and dynamic rendering on the server. Server-side pre-rendering speeds up loading and improves SEO. Next.js Middleware allows you to run code on the server before a request is completed. This is especially useful to avoid having a flash of unauthenticated content when the user visits an authenticated-only page by redirecting the user to a login page. The middleware is also useful for experimentation and internationalization.

  3. With built-in support for streaming through React Suspense, you can be more intentional about which parts of your UI you want to load first and in what order without introducing network waterfalls. This enables you to build pages that are faster to load and eliminate layout shifts.

  4. Code splitting is a technique used to improve performance by breaking the JavaScript bundle into smaller chunks, which are loaded asynchronously only when needed. This helps reduce the initial load time of the application, as the browser doesn't have to download and parse the entire JavaScript bundle upfront. If you try to do code splitting manually (eg. const MyComponent = React.lazy(() => import('./MyComponent'));), you'll often make performance worse. It's easy to inadvertently introduce network waterfalls when code-splitting manually. Next.js provides automatic code splitting built into its router.

  5. Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation. Depending on your needs, Next.js allows you to choose your data fetching strategy on a page and component basis. You can decide to fetch at build time, at request time on the server, or on the client. For example, you can fetch data from your CMS and render your blog posts at build time, which can then be efficiently cached on a CDN.

  6. An elaborate set of caching features handling requests for pages, data fetching, and app building. A Next.js app is typically very fast.

  7. Support for your preferred styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS.

  8. HTML, CSS, React enhancements covering Image, Fonts, and Script optimizations to improve your application's Core Web Vitals and User Experience.

  9. Improved support for TypeScript, with better type checking and more efficient compilation, as well as custom TypeScript Plugin and type checker.

  10. An optimizing compiler and a hot reloading / production-ready server for deployment of a high-performance site in seconds with zero configuration. Via Vercel Cloud, you can now also directly host your website pushed to a Github repository on a domain you choose.

  11. An analytics dashboard where you can scrutinize the performance of your web pages.