Since the day I first heard of the next big thing, Next.js 😉 I was drawn to it. I have been reading about the workings of Next.js and more I learn about it, the more I am amused. So, I started a new challenge #30DaysOfNext (updates on the challenge on my twitter – @PushkarBorkar). With all that said, let me introduce you to the Exciting World of Next.js! 🚀
What is Next.js exactly? 🤔
Next.js is a flexible React framework that gives you building blocks to create fast web applications.
So, Next.js is a framework built on React. What does that mean? Next.js embraces React for what it does best, UI Rendering and augments it with tools for the other features like Routing, Data Fetching, Different Rendering Methods(very exciting topic), and much more.
Next.js has a compiler made using SWC(Speedy Web Compiler), a platform made in Rust which a low level language. It complies the code written in JSX and Modern TS/JS into code supported by all the browsers. Due to the fact that this is made in Rust, it way faster that the babel. 💪
Perks of Next.js for Devs 🧑💻
Next.js comes built-in with TypeScript and Linting using ESLint. It has a cool feature named Fast Refresh, which changes the UI instantaneously on change of React code without even loosing state 😳.
If you want to make new routes, no problem, just add a component in the /pages directory and the route with the name of the file will render the component automatically 🤯
You as a developer can choose how to render a components, do you want to render it server side and them serve to the client, or do you want to generate content on the client side. You can even cache a static site and distribute it from a CDN. And the best part is you can opt in for different styles of rendering and per-page-basis(different rendering method for different page) in the same App.
Rendering in Next.js is a very interesting topic I will cover that in the next blog
Smooth End-user Experience with Next.js
While making the code production ready Next.js optimises the code by performing the following steps,
- Compiling: converts all the JSX and Modern TS/JS files into more accessible code for the browsers
- Minifying: removes all the indents, comments and non-essential elements in the compiled code.
- Bundling: bundles all the various components within the app and from the dependencies into a optimised bundles for browsers
- Code Splitting: splits the bundles according to various pages which are nothing but various paths in the app
With the help of these steps Next.js is able to do some magical things. For Example, it pre-renders all the end-points that the links in the currently rendered page points to and caches them, so when a link is clicked the page is fully rendered and is served instantaneously.
Why is Next.js Better?
Next.js was first introduced in October of 2016. It has been built upon the shoulders of the tech from last two decades. It brings the best of every phase of the web.
It has the composability of Client Side Rendering, It has the dexterity of the Server Side Rendering and the great user experience for both Developers and End-Users.
Closing Thoughts
Next.js is a remarkable milestone in the journey of web. It is performant, has great dev experience and a great community.
I am planning on learning this wonderful framework for the next straight for next 30 days (#30DaysOfNext). You can learn with me, I will be sharing my DevLogs in the form of blogs and tweets.