Are You A React js Developer? These Are Reasons You Should Learn Next js.
Tags: react, javascript, programming, beginners
Published: 2022-06-27 14:30:59

Hello, I am guessing you must have heard the buzzword **"NEXT JS"**. Yeah, I thought as much.
**In this guide, we are going to focus on what Next js is, the difference between it and React, reasons to use and how to get started.**
I hope you are excited, because I am. Let's dive in!

#What is Next js?
In a few words, it is simply The **React Framework for Production**.
Next.js is a flexible React framework that gives you **building blocks** to create fast web applications.

React on the other hand is a **<u>Library</u>**, meaning React provides helpful functions to build UI but leaves it up to the developer where the function is to be used.

Developers need to spend time configuring tools and rewriting solutions for common application requirements in React compared to Next.js which handles the tooling and configuration needed for React and provides additional features and optimizations for your application.

#FEATURES OF NEXT JS
###PAGES
**- Pages with Dynamic Routes**
Next.js supports pages with dynamic routes. For example, if you create a file called pages/about.js, then it will be accessible at /about.

**- Pre-rendering**
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. **This results in better performance and SEO.**

**Next.js has two forms of pre-rendering:**

1. Static Generation
2. Server-side Rendering
The difference is in when it generates the HTML for a page._

**Static Generation:** The HTML is generated at build time and will be reused on each request.

**Server-side Rendering:** The HTML is generated on each request.

If you can pre-render the page ahead of the user's request, then use Static Generation.

Data fetching in Next.js allows you to render your content in different way :

**getStaticPaths**
Next.js will statically pre-render all the paths specified by getStaticPaths. You should use getStaticPaths if you’re statically pre-rendering pages.

**getStaticProps**
If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

**getServerSideProps**
You should use getServerSideProps only if you need to render a page whose data must be fetched at the request time.

**Client-side data fetching**
Client-side data fetching is useful when the content of your pages needs to update frequently. Unlike the server-side rendering APIs, you can use client-side data fetching at the component level.

###BUILT-IN CSS SUPPORT

**Adding Component-Level CSS**
Next.js supports CSS Modules using the [name].module.css file naming convention.
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

**Adding a Global Stylesheet**
To add a stylesheet to your application, import the CSS file within pages/_app.js. These styles (styles.css) will apply to all pages and components in your application.

**Sass Support**
Next.js allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.
Before you can use Next.js' built-in Sass support, be sure to install sass

**CSS-in-JS**

**Examples**
It's possible to use any existing CSS-in-JS. The inline style is the simplest:

```
    function Hi() {
      return <p style={{ color: 'red' }}>hi there</p>
    }
    export default Hi;
```

###LAYOUTS
The React model allows us to construct a page from a series of components. Many of these components are often reused between pages. For example, you might have the same footer on every page.

If you only have one layout for your entire application, you can create a Custom Layout and wrap your application with the layout. Since the component is re-used when changing pages, its component state will be preserved

```
// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}
```

```
import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}
```

###IMAGE COMPONENT AND IMAGE OPTIMIZATION
The Next.js Image component, next/image, is an extension of the HTML element. It has built-in performance optimizations to help you **achieve good Core Web Vitals which affect google ranking**.
To add an image to your application, import the next/image component:

`import Image from 'next/image'`

**Image Sizing**
One of the ways that images most commonly hurt performance is when the <u>_image pushes other elements around on the page as it loads in_</u>. This performance problem has its own Core Web Vital, called **Cumulative Layout Shift.**
The way to avoid this issue is to always size your images. This allows the browser to reserve precisely enough space for the image before it loads.

**next/image is designed to avoid Layout shift and must be sized in one of three ways:**

1. Automatically, using a static import
2. Explicitly, by including a width and height property
3. Implicitly, by using **layout="fill"** which causes the image to expand to fill its parent element.


###FONT OPTIMIZATION
Since version 10.2, Next.js has built-in web font optimization.
By default, Next.js will automatically inline font CSS at build time, **reducing the time taken to fetch font declarations.**

**Usage**
To add a web font to your Next.js application, add the font to a Custom Document.

```
// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

function MyDocument Document {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2 family=Inter&display=optional" rel="stylesheet"/>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
export default MyDocument
```


###STATIC FILE SERVING
Next.js serves static files, like images, under a folder called public in the root directory. Files inside public can then be referenced.

For example, if you add an image to public/image.png, the following code will access the image:

```
import Image from 'next/image'
function Avatar() {
  return <Image src="/me.png" alt="img" width="64" height="64" />
}
export default Avatar
```

###FAST REFRESH
Fast Refresh is a Next.js feature that gives you **instantaneous feedback on edits** made to your React components. It is enabled by default in all Next.js applications on 9.4 or newer.

With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.

- If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file and re-render your component.

- If you edit a file with exports that aren't React components, Fast Refresh will re-run both that file and the other files importing it. So if both Button.js and Card.js import Nav.js, editing Nav.js will update both components.

- Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload.


###TYPESCRIPT
Next.js provides an **integrated TypeScript experience,** including <u>zero-configuration setup and built-in types</u> for Pages, APIs, and more.

You can create a TypeScript project with **create-next-app using the --ts, --typescript flag** like so:

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


###ENVIRONMENT VARIABLES
Next.js comes with **built-in support for environment variables** from Next.js versions 9.4 and up, which allows you to do the following:

**Loading Environment Variables**
Next.js has built-in support for loading environment variables from .env.local into process.env.

An example .env.local:
DB_URL=localhost
DB_USER=myuser

```
// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_URL,
    username: process.env.DB_USER
  })
}
```


###ROUTING
Next.js has a file-system based router built on the concept of pages.

When a file is added to the pages directory, **it's automatically available as a route.**

The files inside the pages directory can be used to define the most common patterns.

**Index routes**
The router will automatically route files named index to the root of the directory.

pages/index.js → /
pages/blog/index.js → /blog

**Nested routes**
The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.

pages/blog/first-post.js → /blog/first-post

**Linking between pages**
The Next.js **router** allows you to do client-side route transitions between pages, similar to a single-page application.

A React component called **<u>Link</u>** is provided to do this client-side route transition.

```
import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
    </ul>
  )
}
export default Home
```

next/link can cover most of your routing needs, but you can also do client-side navigations without it by using **next/router.**

The following example shows how to do basic page navigations with useRouter:

```
import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Click here to read more
    </button>
  )
}
```


###API ROUTES
Any file inside the folder pages/api is mapped to /api/* and will be treated as an **API endpoint** instead of a page.

For example, the following API route pages/api/user.js returns a json response with a status code of 200:

```
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}
```


###NEXT.JS ADVANTAGES
React and Next.js both provide great developer experiences in their own way. But why use Next.js and not other frameworks for React? It depends on the production requirements and medium/long-term goals. Below are some advantages.

Speed
Fast rendering
Built-in CSS support
Better image optimization
SEO
ESLint compatible
Easy customization and deployment
API support


###RESOURCES TO HELP YOU GET STARTED
[Official Docs](https://nextjs.org/docs/getting-started)
[Build a website with Next js](https://www.youtube.com/watch?v=CMx51wpd7g4&t=206s)
[Next js crash course](https://www.youtube.com/watch?v=mTz0GXj8NN0&t=1804s)