Introduction to Next.js - Part-1
Tags: nextjs, webdev, react
Published: 2024-04-02 04:45:28

## 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:

```bash
npx create-next-app@latest
```

This command initiates a setup process with prompts:

```bash
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

1. Run `npm run dev` to start the development server.
2. Visit `http://localhost:3000` to view your application.
3. 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:

```javascript
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:

```javascript
// 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.

```javascript
//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`

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

export default Navbar;
```

Put Navbar component in `app/layout.js`

```javascript
//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.

```javascript
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.