Next.js: Bringing Next level experience for your React application
Next.js gives you the best developer experience with all the features you need for production.
Next.js is a React Framework. If you know React, needs to optimize your web page’s user experience? you have to try this framework.
Next.js is celebrating the success of 5th year in the industry. World-famous web pages are now written in NextJS. Here are few examples of it.
No need for prior knowledge for nextJS. it is just like react, you can directly write from Next.js boilerplate with npx command or you can migrate your react app to Next.js within few minutes.
How to create an app:
npx create-next-app <application name> --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"Do I actually need NEXT.js?
File system routing (built-in routing solution).
when we are using create react app it is using react-router-dom for routing works. You don’t have to install react-router-dom with Next.js and it is very easy and simple. This is call file system routing because routing is based on your directory.
Next.js server serve each file under pages directory
If you create pages/about.js that exports a React component like below, it will be accessible at baseURL/about.
This is really powerful and easy navigation.
Static file serving (eg:: images)
In your root directory, you can see a folder named. every each file inside of it we can reach from baseURL/filename .
Automatic code Splitting
This means pages never load unnecessary code!. Every import you declare gets bundled and served with each page. When loading a page only the exact code and resources that it needs for that page will be loaded. it will reduce your load times and speed things up for your users.
Server-side rendering
React is a front-end framework and it’s using javascript for rendering. when requesting an HTML file from a server it serves a single small size HTML file with a javascript bundle. it needs to compile javascript from the client’s browser otherwise not a single word will not display from the browser. we called this client-side rendering.
Using Next.js browser get full HTML page for pages. So need to compile javascript from the user’s side. because of this performance will be high exceptional way and SEO ready, all content of HTML will be passed through the internet, search engines can read and store in their search registries. It would get faster search results for users. All these features come under zero configurations. So absolute amazing works are done by next js.
So all these are great things you would want to obviously improve the performance of your application and make it as competitive and production-ready as possible.
In this blog, I’m telling you my perspective on the usage of Next.js. Next.js has many more features other than those which I explained to you above sections. I highly recommend you go through their documentation and it’s really helpful and maybe a little dense sometimes. It literally goes over about every feature of nextJS.
https://nextjs.org/docs/getting-started
Thanks for your reading and, stay safe... 👋