What is Next.js? Why developers love it!

What is Next.JS?

Next.JS is a React.JS Framework specifically built for SEO-compliant web applications. While React.JS is mostly unopinionated, Next.JS comes with building blocks and best practices. Specifically, Next.JS has building blocks for routing, data fetching, rendering, hosting and much more.

Next.JS is using file-based routing (as opposed to re-rendering the content of the current page in single-page applications). Client-side rendering is available using the <Link/> component though (read more here). Next.JS also allows employing a variety of different rendering methods including client-side rendering, server-side rendering, static-site generation and incremental static generation (read more about the different rendering mechanisms with code examples here).

Why Next.JS? What is the use of it?

Next.js is a Javascript framework that allows you to build interactive user interfaces, and extremely user-facing, SEO-compliant static web applications. It allows you to use different rendering methods and has TypeScript support, smart bundling, route prefetching, and much more. Next.JS is a react framework that lets you develop an SEO-compliant web application and it’s great for search engine optimization because makes it easy to make your website fast and SEO-compliant. NextJs offers a number of features that help to do so. 

Next.JS is a lifesaver for very big websites (1000+ pages), programmatic pages and websites that heavily depend on data that needs frequent updating. These websites benefit from the usage of different rendering methods depending on if the page is visited frequently and if the data needs to be updated periodically.

What are the reasons to use Next.JS?

Next.JS gives you more flexibility to build your website how you want it. On the flip side, you will be responsible for all things SEO.  Specifically, you will be responsible for fast loading of the website, image SEO, canonicals, internal links, schemas, etc. Here are reasons why Next.JS is the right choice for you:

• You want to build a large website which requires different rendering methods.
• Your website is data-heavy and needs frequent updating (e.g. programmatic website).
• Your website is highly interactive and simply cannot be built with other solutions (e.g. WordPress).
• You want to learn about SEO and you do not mind struggling to rank the website for the first 6-12 months.
• You are already using React.JS and you find yourself reinventing the wheel every day. For example, Next.JS can easily be hosted on Vercel which comes with a CDN.
• You have built a javascript-based website, but you struggle to index it. Next.JS offers static and incremental static rendering which ensures that the important HTML pieces are served to the search engine crawlers.

How to create react app with Next.JS?

You can follow these commands to start a new next.js project (without typescript). This will automatically set up the project and folder structure for you.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

How to get started with Next.JS and typescript?

It is straightforward to start a new next.js project with typescript (see below). In the tsconfig.json, you can customise the compiler, read more about all options here.

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

You can specify path mappings. For example, if you want to avoid ugly imports, you can map the most important paths.

# ts.config
    
"paths": {
      "@/*": ["./src/*"],
	  "@/api/*": ["./src/api/*"],
	  "@/utils/*": ["./src/utils/*"],
	  "@/rendering/*": ["./src/rendering/*"],
	  "@/components/*": ["./src/components/*"],
	  "@/common/*": ["./src/common/*"],

    }

#  Ugly imports
import {GetData} from '../../../api'
# Now
import {GetData} from '@/api/'

How to get started with Next.JS and tailwind?

After you have installed Next.JS with typescript, you can easily add tailwind. In tailwind.config, you can then add all file types and paths.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

How does the Next.JS file-based routing system work?

Next.js has a file-system-based router built on the concept of pages. As soon as a page is added to the pages folder, the page becomes available as a route (see below). For example, after adding csr.tsx to the single page folder, the page becomes available as a route.

Next.JS does support client-side routing though through the <Link/> component. Any <Link/> destinations that are statically generated will be pre-fetched once in sight. Client- and Server-side rendered routes will only be fetched upon <Link/> click. Client-side rendering in a SPA fashion avoids reloading duplicate content (footer, header, etc.).

import Link from 'next/link'

function NarBar() {
  return (
    <div>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/jobs">Jobs</Link>
      </li>
      <li>
        <Link href="/about">About/Link>
      </li>
   </div>

  )
}

export default NarBar

Next.JS allows to easily pre-render HTML web pages

Next.JS permits you to pre-render some web pages making them blazing fast. Incremental Static Regeneration (ISR) offers you the benefit pre rendering of static web pages without needing to statically build website during the build. In addition to time-based ISR (rebuilding the static site every X mins), Next.JS has actually recently introduced on-demand ISR (restoring the website based upon your demand). For an in-depth guide with code examples, read more here.

Rendering methods of Next.Js

Next.JS offers a number of rendering methods. Here, the rendering methods are ordered from fastest to slowest.

Static Pages:

The HTML is generated during build time. This fastest and most preferred method to render a page if you do not expect the page to update at all (or very infrequently). Some pages might almost never really update (e.g. About-Us, Privacy Policy) and you can just deploy your site again so that it reflects the change. In case your pages might update after the deployment, you can use Incremental Static Rendering (ISR).

Incremental Static Rendering (ISR):

In simple terms, ISR pages are pre-rendered pages that become static once a user visits them. You can specify after what interval the page is rebuilt (i.e. by specifying revalidate: 10). The disadvantage is that upon a new deployment, the very first request to this page is going to be slow. Once the page is built, it’s saved in the cache. All later requests to this page will be as fast as a request to a static page. After the revalidation period, the cache is invalidated and the page is rebuilt. The page speed of the user is not affected by this.

Server Side Rendering/ Generation (SSG):

The HTML is generated during run time. The HTML is generated when the user requests visits this page. A possible scenario might be a stock analysis website. Likely, you want the stock price to be real-time and not show a cached version from 10 minutes ago. SSR and CSR can be used for internal company dashboards. For these sites, SEO does not matter and it is more important to have real-time data compared to having static websites with a very fast loading time. SSR is also important after a user has logged in to a member’s area of a website (e.g. you log into your banking app) Likely, he will see unique data pertaining to his account and there is realistically no way to pre-render this site.

Client Side Generation (CSR):

Client Side Rendering pushes all the work to the browser. The user visits a page, gets served a blank page and then data is fetched and the site is built. CSR should not be used if you intend to get organic traffic to your website. Googlebot will find an empty page and nothing can be indexed.

How to deploy your Next.JS?

Deploying your Next.JS app to production can be very straightforward. For this example, we are using Vercel (the parent company of Next.JS). You can set up the deployment in under a minute.

• Use your social github login for Vercel
• Import the Next.JS Github repository you want to deploy
• Your project should now be imported and any push to the main branch of the GitHub repository will be deployed to vercel

After you have linked your repository and pushed to the main branch, you should be able to see the latest production deployments. You can also find a preview build there.

How do you check your Next.JS version?

In your root folder, enter npx next --version into the command line to see your Next.JS version.

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “What is Next.JS?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

Next.JS is a React.JS Framework specifically built for SEO-compliant web applications. While React.JS is mostly unopinionated, Next.JS comes with building blocks and best practices. Specifically, Next.JS has building blocks for routing, data fetching, rendering, hosting and much more.

”
}
}
, {
“@type”: “Question”,
“name”: “Why Next.JS?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

Next.js is a React framework that allows you to build SEO-friendly, and extremely user-facing static websites and web applications. Next.JS is great for very big websites (1000+ pages), programmatic pages and websites that heavily depend on data that needs frequent updating.

”
}
}
, {
“@type”: “Question”,
“name”: “What is next js used for?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

Next.JS is a React.JS Framework specifically built for SEO-compliant web applications. Next.js is a React framework that allows you to build SEO-friendly, and extremely user-facing static websites and web applications.

”
}
}
, {
“@type”: “Question”,
“name”: “Is Next.JS a framework?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

Yes, Next.JS is a React Framework that allows you to build SEO-friendly, and extremely user-facing static websites and web applications.

”
}
}
, {
“@type”: “Question”,
“name”: “What are the reasons to use Next.JS?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

1.) Your website is data-heavy and needs frequent updating (e.g. programmatic website).
2.) You want to build a large website which requires different rendering methods.
3.) Your website is highly interactive and simply cannot be built with other solutions (e.g. WordPress).

”
}
}
, {
“@type”: “Question”,
“name”: “How to deploy Next.js?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

First, use your GitHub social login for Vercel.com. Then, import the Next.JS Github repository you want to deploy. Last, your project should now be imported and any push to the main branch of the GitHub repository will be deployed to vercel.com

”
}
}
, {
“@type”: “Question”,
“name”: “Is Next.JS free?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

Yes, Next.JS is on the MIT license. You might incur costs if you deploy your Next.JS application to Vercel and exceed the free tier limits.

”
}
}
, {
“@type”: “Question”,
“name”: “How do you check your Next.JS version?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “

In your root folder, enter npx next –version into the command line to see your Next.JS version.

”
}
}
] }