Next is a React powered framework for building web applications. It was initially created by Vercel, formerly known as ZEIT, and has gained significant popularity in recent years.
How it began and where it is now? Why we need it? What it solves, what it creates? These are basically things that we need to know when picking up a technology. So what about Next.
How it began
For quite a while React stayed as defacto standard whether for Beginner to “Learn to Get into Web Development” or Experienced to “Start a Project with Wide Support & Easy Adoption”. So there was a lot of adoption for it and its community boomed. But there was some stuff different in the whole Philosophy, that is called SPA – Single Page Application.
Previously there were Pages – HTML Pages served directly from the server where the content of the page stays in the page. Browser just acts as a viewer for that page. People were still using JavaScript for interactions and stuff. With Node Coming into the game, people tried to look the web pages differently, and by people I meant developers.
Node was a Runtime, powered by V8, the same JavaScript Engine that Chrome uses. Node enabled the possibility of writing JavaScript for the Servers. These are the servers who Serves HTML Pages. Frameworks like Express, Ember started to act as Server Side Frameworks, whose core responsibility was to run in the server, do some operations and serve HTML Pages. Well not HTML really since it’s too dumb to be useful, Templating Engines appeared like EJS & Pug Handlebars. Now people not only serving pages from the server but generating those pages with meaningful data on the server before serving to the browser. Well this wasn’t anything new, PHP & ASP was doing it for a decade now. But after the page arrives to browser, to write client side operation we need to write JavaScript that handles much more stuff Page Validation, API Calls, Repainting updates, State Management of the application… and these weren’t easy at all. So Frontend Frameworks like Backbone & AngularJS appeared to solve some of this Functionality. While they solving it, what they also did is they were removing the server’s dependency to write the content of the page. Later Angular React & Vue drastically changed the ecosystem where the whole page gets built on the browser and all the content comes through the API. Start of SPA rather than what previously happening with MPA – Multi Page Application.
Why we need it?
As these Framework Solved many problems and given much easier way to make frontend web application, their approach of removing the backend was not the right choice for very few crucial cases. Since the Page does not contain any Content to begin with, Search Engines were unable to index these pages. Since there are no Page Hierarchy, Routing Page Navigation was different. Since Google Search engine took some time to detect these types of application to index their contents. Meanwhile, Frameworks like Gatsby & Next appeared. Gatsby Generated Static Sites from React Components & Next Generated HTML Pages on the Server before sending it to the browser. They Introduced SSG – Static Site Generation & SSR – Server Side Rendering.
What Next Features
From 2018 to this time, Next have grown incrementally In terms of Developer Experience, Adoption and Features. In Recent times, Next is Considered as truly Full Stack Framework
Where it is now?
- Client & Server Side Rendering
- File & Directory Based Routing System
- Middleware & Route Handlers
- Images & Font optimization
- React Server Component & HTML Dynamic Streaming
- Node & Serverless & Edge Runtime Support
- Seamless Integration with Vercel for Production
- Many more…
As Next gives features to handle many cases Server Rendered Pages comes with their own set of Challenges that still there from beginning, and we sometime need a way around to solve particular problems, even in the Next.
- Setting up Real time Stuff (WebSocket & PubSub) with Serverless Functions
- Global State Management across Server Rendered Pages
These Features enabled Organizations like Twitch, Audible, Airbnb, Notion, Washington Post, ProductHunt, Hashnode to Get Creative with their Work and Featuring Best User Experience.
Next and React work together seamlessly in building web applications. Next provides a robust framework for server-side rendering and static site generation, while React serves as the powerful JavaScript library for building user interfaces. With Next, you can leverage React’s component-based architecture to create dynamic and interactive web pages that are optimized for performance. The combination of Next and React allows developers to easily build full-stack web applications with ease and efficiency.
