Getting Started with Next JS

1. What is the Next JS.

Next.js is a popular JavaScript framework that allows developers to create server-rendered React applications easily. It is built on top of Node.js and provides a set of features that make it easy to develop and deploy web applications. In this blog post, we will explore the basics of Next.js and how to get started with it. Getting started with Next.js is simple.

2. How to Create Next JS Applications

First, you’ll need to have Node.js and npm (Node Package Manager) installed on your machine. Once you have those, you can create a new Next.js project by running the following command:

npx create-next-app my-app

This command will create a new directory called my-app that contains the basic structure of a Next.js app. You can then navigate into the directory and start the development server by running:

cd my-app
npm run dev

This will start the development server and you’ll be able to view your app by navigating to http://localhost:3000 in your browser.

Next.js also provides a built-in development server, which automatically reloads the page when you make changes to your code. This makes it easy to see the changes you’ve made and iterate quickly.

3. Why We Should Use Next JS.

Next JS provides may features that makes easy, fast and optimized Web app development. First, let’s talk about why you might want to use Next.js.

3.1 Server-side Rendering

One of the main benefits of Next.js is that it allows for server-rendered React applications. This means that the initial render of your app is done on the server, rather than in the browser. This can improve the performance of your app and make it more accessible to users with slower internet connections. Additionally, server-rendered React applications are generally better for SEO as search engines are able to easily index the content.

Next.js also provides a built-in way to handle server-side rendering. This allows you to fetch data on the server and pass it to your components to be rendered on the client. To fetch data on the server, you can use the getServerSideProps method. This method is called on the server before the component is rendered and it allows you to fetch the data needed for the page.

The getServerSideProps method is a powerful way to fetch data for your pages and it is also a way to handle the data fetching on server side. This method is called on the server before the component is rendered, which allows you to fetch the data needed for the page.

3.2 Easy and Dynamic Routing

Another great feature of Next.js is the ability to easily implement dynamic routes. You can define routes in your app by creating .js files in the pages directory. These files will automatically be mapped to routes based on their file name. For example, if you create a file called about.js in the pages directory, it will be accessible at http://localhost:3000/about.

Dynamic routes allow you to create pages that can accept parameters, such as a page that shows a specific product based on its ID. To create a dynamic route, you can create a folder in the pages directory with brackets to a page name [id]. For example, if you want to create a dynamic route for a product page, you would create a folder called pages/product/[id].js. The [id] part of the folder name tells Next.js that this is a dynamic route and it will accept a parameter called id. page URL will be like http://localhost:3000/product/234

root
  |-> pages
		|-> product
				|-> [id].js
		|-> about.js

3.3 Layout of pages

with Next JS we can create Layout for all pages or different Layout for different pages/type of pages. To Create Layout for all pages we just need to define below code in pages/_app.js if this file is not already there we need to create one.

// pages/_app.js

import Layout from '../components/layout'

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

// components/layout.js

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

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

So you can see in this example we have created one layout with navbar and footer and added in _app file to reuse it.

Same way we can have Per-Pages Layout. means can be created different layout as per page required. For that we need to define callback function for getLayout in our pages/_app.js file

// pages/_app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

Now it can be used in our index file of page or any routing file inside page directory for example here is index file (home page) we have set NestedLayout in this file.

// pages/index.js

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

export default function Page() {
  return (
    /** Your content */
  )
}

Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

3.4 Optimized Image component

Next JS have included Image component with Improved Performance, Visual Stability, Faster Page Loads, Asset Flexibility. means image will be served properly based on screen size, prevents Layout sift by having loader or blur image before fully loaded.

we can use image like this.

import Image from 'next/image'

import profilePic from '../public/me.png'

function Profile() {
  return (
    <>
      <h1>Username</h1>
      <Image
        src={profilePic}
        alt="Picture of the user"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
    </>
  )
}

3.5 Automatic Code Splitting

One of the key features of Next.js is automatic code splitting. This means that Next.js will automatically split your code into smaller chunks, so that only the code that is needed to render a specific page is loaded. This can help improve the performance of your app by reducing the amount of code that needs to be loaded on initial load. This is particularly useful for larger applications with many routes and pages.

Overall, Next.js is a powerful framework that makes it easy to develop and deploy web applications. It provides a set of features that help to improve the performance and accessibility of your app, while also making it easy to develop and iterate quickly.

To get more information on next.js and its features, you can check the documentation from the official site https://nextjs.org/docs.