Skip to main content

NextJS

The React Framework for the Web

NextJS is a Full Stack Web Application framework that build on the top of ReactJS

  • NextJS is developed by vercel
info

Vercel is a hosting platform, that host or deploy our NextJS application.

Features of NextJS​

NextJS has many great features for building a full stack web application.

  • SSR - SSR stands for Server Side Rendering, mean's your page completely build on server, and then serve to client as html page with page content, not something like react, react send empty html file to client (browser) and JavaScript enject (insert) the html content in page. that the ReactJS of not good for SEO.
  • SEO - NextJS supports SSR, its great for SEO.
  • Static Site Generation - if we are not using any server functionality in web page then its good time to generate your wep to static we app. in the plain html/css/js. and we does dot require to run NodeJS on server. static pages serve like normal html page but it nextjs generated static pages has functionality of react and site generation like normal. when we use html/css/js, it good, but it takes, so if we use nextjs, but we doest not require anything other html pages, the we create Static.

NextJS vs ReactJS​

ReactJS

ReactJS is a JavaScript library, that handle only UI of websites or web app.

ReactJS doest not support Server Side Rendering (SSR), it support Client Side Rendering (CSR).

NextJS

NextJS is a full stack framework that is more powerfull then react, it is full stack framework so we can develop frontend and backend both using NextJS.

NextJS support Server Side Rendering (SSR).

info

NextJS is a serverless framework

How to learn NextJS​

If you have a greate knowledge of ReactJS and modern JavaScript, then you ready to learn NextJS, it takes time around 15-20 days only.

  • NextJS is a ReactJS based framework. so we want to learn NextJS. so first we learn ReactJS and then learn NextJS.
  • Knowledge of ReactJS required to learn NextJS.
  • ReactJS is only used to build ui of wep app, but NextJS is full-stack web application framework (Full-Stack mean's, we can develop application's backend and frontend using NextJS).
info

NextJS is a serverless framework.

info

Learn ReactJS from our web-app.

Main Features of NextJS+​

Routing - A file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.

Rendering - Client-side and Server-side Rendering with Client and Server Components.

Data Fetching- Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.

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

Optimizations - Image, Fonts, and Script Optimizations to improve your application's Core Web Vitals and User Experience.

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

App Router vs Pages Router​

Next.js has two different routers: the App Router and the Pages Router.

The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.