Go next with Next.js

Today in this blog we will learn about Next.js. Nowadays Next.js is the most popular framework of React.

Next.js is a React framework created by Zeit. it's an open-source development framework built on Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.

Quite merely, Next.js is a React framework for developing single-page JavaScript applications. The benefits of this framework are numerous, both for our clients' applications as well as for our development team. You can write both frontend and backend in one folder in Next.js. It has many great features and advantages, which can make Next.js your first option for building your next web application. It's also SEO friendly.

Popular Apps like Tiktok, Hulu, Hashnode, Twitch Mobile, Starbucks, Uber, Netflix, Binance, Ticket Master, AT&T, Deliveroo, Docker, Realtor, Marvel, Typeform, Pusher, SumUp, NuBank etc. are made with Next.js. There are more apps/websites are creating daily with Next.js beacause of it's advance features.

Use Next.js if you want to build websites such as:

• Large multi-user websites
• Client-side rendered applications (SPA/MPA)
• Big eCommerce websites
• Web portals

However, you can also use Next.js to build simpler websites, which is also possible with Gatsby.

These websites include:

• B2B and SaaS websites
• Finance websites

Next.js websites includes:

• High Performance
• Scalability
• Constant Rendering
• SEO Friendly

Start with Next.js

First of all for creating a Next.js Project type the following code:

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

Or, you can create a Typescript project with the following code:

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

Options:

create-next-app comes with the following options:

• --ts, --typescript - Initialize as a typescript project.
• -e, --example [name]|[github-url] - An example to bootstrap the app with from the following URL you provide.
• --example-path [path-to-example] - You can specify the path for the specified branch you want as an example.
• --use-npm - Explicitly convey the CLI to bootstrap the app using npm. To bootstrap using yarn, we suggest running yarn create next-app

Why use create-use-next-app

create-next-app allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes several benefits:

• Interactive Experience
• Zero Dependencies
• Offline Support
• Support for Examples
• Tested

Next.js built-in components

Next.js has some built-in components to use React-Router, HTML, Image, Script, etc. in Next.js. They are -

• next/router - If you wanted to access the router object inside any functional component in your app, you can use the useRouter() hook, You can use React Router's features by using this component. Take a look at the following example:

import { useRouter } from 'next/router';

const AboutPage = () => {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click me
    </button>
  )
}

export default AboutPage; 

• next/link - It's usually used to create Client-side transitions between routes via the Link component exported by next/link. You can create dynamic link with this component. Generally it's an alternate of or react-router tag. Use this following code to create Link component:

import Link from 'next/link';

<Link href="https://iftakher-hossen.vercel.app/">Visit</Link>

• next/image - It's usually used to show images in Next.js. Using this component we can get optimized & preloaded pictures on our website. You can use this with the following code:

import Image from 'next/image';

<Image src="https://i.ibb.co/GnnCPMP/bg.jpg" alt="Nature" width="250px" height="150px" />

Here you always have to use width and height either it will show an error. If you use an image from an external link you have to describe it at next.config.js like:

module.exports = {
  images: {
    domains: ['i.ibb.co'], //your-external-link-hostname
  },
}

• next/script - Next.js has a built-in component to load an external scripts. Such as Stripe.js. Take a look at the following codes:

import { useState } from 'react';
import Script from 'next/script';

const Payment = () => {
  const [stripe, setStripe] = useState(null);

  return (
    <div>
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={() => {
          setStripe({ stripe: window.Stripe('ih_dev_5555') })
        }}
      />
    </div>
  )
}

export default Payment;

• next/head - It's used for appending elements to the head of the page. You can add separate titles, various kinds of CSS/scripts. Take a look at the following codes:

import Head from 'next/head';

<Head>
   <title>My page title</title>
   <meta name="viewport" content="initial-scale=1.0", width="device-width" />
</Head>

• next/amp - AMP is an advanced features of NExt.js. With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React. You can read more about AMP in the official amp.dev site.

• next/server - next/server is a module that provides several exports for server-only helpers, such as middleware. You can use features like - NextMiddleware, NextRequest, NextFetchEvent, NextResponse, Public Methods & Static Methods.
  take a look at official documentation to know more!

• next/streaming - The experimental next/streaming module provides streaming-related APIs to port the existing functionality of Next.js apps to streaming scenarios and reduce the usage of React Server Components. take a look at official documentation to know more!

• Edge Runtime - The Next.js Edge Runtime is based on standard Web APIs, which are used by Middleware. There are many kinds of Runtime API. Such as Globals, Base64, Encoding, Environment, Fetch, Streams, Timers, Web, Crypto, Logging.
  The Edge Runtime has some restrictions including Native Node.js APIs are not supported and JavaScript language features are disabled, and will not work eval & new Function(evalString).

• Data Fetching - You can fetch data in Next.js using 4 built-in components. Such as getInitialProps, getServerSideProps, getStaticPaths, getStaticProps.

• Static Optimization Indicator - Next.js has features like when a page qualifies for Automatic Static Optimization they show an indicator to let you know. This is helpful since automatic static optimization can be very beneficial and knowing immediately in development if the page qualifies can be useful. But in some cases, this indicator might not be useful, like Electron Applications. Then we have to disable it from next.config.js like the following code:
  

module.exports = {
  devIndicators: {
    autoPrerender: false,
  },
}

• next.config.js - Edit in next.config.js this file For custom advanced configuration of Next.js. next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.

Visit Next.js official site to read the documentation and know more in detail.

In the next tutorial, we will learn the core features of Next.js.

I try to cover the basics of Next.js. If I made any mistakes pardon me! And I'd love to hear from you If you have any suggestions for me. Thank you for reading this blog!

Find me on Github and Portfolio or Send a Mail

Follow for more blogs!