Why you should move in to Next js

1. Built-in Routing Support

Next js provides a built-in-file-based Routing system, which means you don't need to use any external packages or libraries, React js requires the use of react-router-dom for Routing.

For Pages directory

Image 1

Currently, i am working with Next js 13.3.0, where pages directory used for routing(Because the app directory is in experimental mode). For example if you create a directory called my-folder under the pages directory and create a file called my-file.js, the route to access this file will be my-folder/my-file. {image 1}

Include params in Route (:id)

If you want to create a route like student/:id, you can create a file called [id].js inside a folder called student under the pages directory. {image 1}

For app directory

Image 2

Image 3

If you are working with Next js version 13 or above and have an app directory in your project's folder structure, you can create a route by creating a folder inside app directory and adding a page.js file inside it. , for example if you create a folder called my-folder inside app directory and create a file called page.js inside it, the path of this file will be /my-folder. {Image 2, Image 3}

2. 700 Times Faster Speed in Production

Meaning?

Next.js can be up to 700 times faster in production mode, which means that When you are building a website and it's running on localhost, any changes you make and save will updated 700 times faster than React. However, in deployment mode, it's speed approximately the same as to React.

Why?

Next.js uses Turbopack, which can updated up to 700 times faster than webpack used by react.

Advantage?

It saves developers time by updating code quickly in production mode.

3. Write both Backend and Frontend

Next js provides developers with a built-in server system, which means that you don't need to set up a separate server to write backend code for your application.

For Pages Directory

When you create a Next js app, a built-in folder called api automatically created inside the pages directory. You can create any file inside this api folder, and you can access the API defined in these file by using the api/<fileName>.

For App Directory

Image 4

With next js latest version(13) we can make api routes with help of route.js/route.ts file. In App directory we can make folder and make a file name route.js then our api route is /<folder name>. {image4}

Note :- We can make api routes by making folder and route.js file in only app directory. We cannot make same api route or frontend component route in this condition route will conflicted.

4. Search Engine Optimization (SEO)

SEO means the ranking of your website on Search Engines such as Google, Bing, Yahoo and DuckDuckGo etc.

Load speed is the one of most important factors when it comes to SEO and Google ranking and with Next.js you're simply faster. What makes Next.js stand out against other popular framework, is that it renders the HTML on the server(server-side) rather than in the browser (client side).