Introduction to Next.js - Part-1

Introduction

What is Next.js?

Used by some of the world's largest companies, Next.js enables you to create high-quality web applications with the power of React components.

Next.js serves as a React framework designed for developing full-stack web applications. By leveraging React Components for creating user interfaces, Next.js extends functionality and streamlines optimizations.

Beneath the surface, Next.js handles the abstraction and automatic configuration of essential React tooling, such as bundling and compiling. This empowers developers, whether working individually or within a team, to concentrate on application development rather than intricate configuration details.

With Next.js, building interactive, dynamic, and high-performance React applications becomes a more efficient and focused process.

Prerequisites:

This is meant to be easy for beginners, but I want to set a starting point. This helps keep the focus on Next.js features.
It's recommended to know a bit about HTML, CSS, and React to make the most of this series.

Installation

You can start a new Next.js app using create-next-app.

Simply run:

npx create-next-app@latest

This command initiates a setup process with prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

You can optionally use a src directory in the root of your project to separate your application's code from configuration files.

Note: The latest versions of Next.js use the 'app' router, we will be using that in this series.

Running the Dev Server

Run npm run dev to start the development server.
Visit http://localhost:3000 to view your application.
Edit app/page.jsx file and save it to see the updated result in your browser.

Open your project in your preffered text editor or IDE.
I use Neovim.

Routes

Next.js uses a file based routing, where each folder in app folder represents a route.
A special page.js file is used to make route segments publicly accessible.

For example:
Open the file in app/page.js and remove everything and return only a <div>This is home route</div>

Your page.js should lool like:

export default function Home() {
  return (
    <>
      <div>This is home page.</div>
    </>
  );
}

Now, if you visit https://localhost:3000/, You should be able to see the text 'This is home route'

If you make any folders inside app directory, for example: add folders app/about or app/contact and add the respective page.js files inside.

Populate it:

// app/about/page.js
export default function About() {
  return (
    <>
      <div>This is about page.</div>
    </>
  );
}

Now visit https://localhost:3000/about and you'll see text This is about page.

Layout page

A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.

Let's understand this with and example.

Root Layout

The root layout is defined at the top level of the app directory and applies to all routes. This layout is required and must contain html and body tags, allowing you to modify the initial HTML returned from the server.

//app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  );
}

If you want to display a Navbar on every page of your app, place it in the layout page.

Create a simple Navbar component in app/components/Navbar.jsx

//app/components/Navbar.jsx
const Navbar = () => {
  return <div>Navbar</div>;
};

export default Navbar;

Put Navbar component in app/layout.js

//app/layout.jsx
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}
export default Navbar;

Now you can see Navbar in every page you visit, for example on https//localhost://3000/about, you'll see:

Navbar
This is about page.

Note: You can import anything with @/name_of_component

app/layout.js also contains metadata for your site.

export const metadata = {
  //This is title of your site.
  title: "Create Next App",
  description: "Generated by create next app",
};

Conclusion

In this blog, we learned about what Next.js is and how routes and layouts work in Next.js.

Blog