What next.js really is ?

Next.js is a react framework,

which It means It’s a platform for developing single page application using react , it makes the wesite faster and high performance for programmer, when we built a react application using next js you dont need to built yous website from scratsh, because the next.js has many importnt built in features sush as : pages , dynamic routes , server side rendering , code splitting and dynamic imports, so lets start to know more about this awesome piece of technology

why to use Next.js server side rendering instead of React.js client-side rendering?

Nextjs is a wrapper around react library which enables your react code to pre-render and run on the server that means when you are working with a react website which is just a javascript code, the process is that firstly your client would download the code from the server then javascript code would be executed by the browser and then you see the actual output on the screen but if you take a look of(AT) sites which are built with nextjs and go to the view source of the site you could see all the content within the html document itself , so in case of nextjs the server is actually sending you the html it self then the browser renders the page after that the srver dwonload the javascript code but in case of react applications the server sends you the javascript bundles which are then executed by the browsers and then the output is displayed to the user , so that this is one of the many benefits next js and it is the most important one , because is opens o lot of doors of performance for SEO and for cashing

Next.js is the fastest and most enjoyable end-user experience nust go hand-in-hand with the fastest and that must enjoyable developer experience

What makes next js is a developer experience ?

it is all about real-time feedback ,when I sit down my code and build my product, I want to see the reaction to my changes isnstantly

The browser reflects my changes as soon as I save a file , this doesn’t only work for styles, but thanks to react fast refresh, all states are preserved even as I make changes

Automatic code splitting

Next.js is clever enough to only load the Javascript and CSS that are needed for any given page. it alows us to split our code into various chunks which you can load on demand, for examlple : if you have a webite that contains a three page home , aboutus and services ,the Next.js splits your JavaScript into separate chunks for each route so for our example the website split to three chunks, Next.js only sends the code needed for the initial route

built-in CSS and adding component level css

next.js extends import so you can import CSS files directly into your components. next.js supports css modules, css modules is a css file with the name style.module.css if you put this file in the compnent folder ths css claccess names are makes locally to this component for example, imagine you have a component folder called text inside this folder you have two files text.js and text.module.css according to this exampe this is what you need to do: First, create components/text.module.css with the following content:

Then, create components/text.js, importing and using the above CSS file:

CSS Modules are an optional feature and are only enabled for files with the .module.css extension

Conclusion:

Next.js is used in tens of thousands of production-facing websites and web applications, including many of the world's largest brands.