What Is Nextjs Complete Guide

What is Next.js?

Next.js is a powerful React front-end development web framework that allows functional front-end features such as server-side rendering and generating static websites for React-based web applications. It was created by Vercel and has quickly gained popularity due to its robust features and developer-friendly setup.

Key Features of Next.js:

• Server-Side Rendering (SSR): Pre-renders React pages on the server.
• Static Site Generation (SSG): Generates static HTML files during build time.
• API Routes: Allows you to build API endpoints inside your Next.js application.
• File-Based Routing: Automatically creates routes based on your file structure.
• Built-In CSS and Sass Support: Includes support for importing CSS and Sass files.
• Fast Refresh: Provides real-time updates to code without needing to reload the page.
• TypeScript Support: Built-in TypeScript configuration.
• Image Optimization: Includes automatic image optimization out of the box.
• Internationalization: Easy setup for multi-language applications.

Step-by-Step Guide to Setting Up and Using Next.js

Prerequisites:

1. Node.js (v12.22.0 or later): Make sure Node.js is installed on your machine.
2. npm or yarn: These are the package managers used to install packages.

Step 1: Create a New Next.js Project

You can create a new Next.js project using either npx or yarn.

Using npx:

npx create-next-app@latest my-nextjs-app

Using yarn:

yarn create next-app my-nextjs-app

Follow the prompts to set up your project. You can choose whether to include ESLint, TypeScript, etc.

Navigate into the project directory:

cd my-nextjs-app

Step 2: Start the Development Server

Run the following command to start the development server:

Using npm:

npm run dev

Using yarn:

yarn dev

By default, the development server runs on http://localhost:3000.

Step 3: Explore the Project Structure

When you create a new Next.js project, the directory structure will look something like this:

my-nextjs-app/
├── node_modules/
├── public/
│   ├── images/
│   └── favicon.ico
├── styles/
│   └── globals.css
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── index.js
│   └── _app.js (only if customizing App component)
├── .gitignore
├── next.config.js
├── package.json
└── README.md

• pages/: Contains all React components for routing. Each file in this directory corresponds to a route.
• public/: Static assets like images can be placed here.
• styles/: Global styles can be added here. You can also use CSS modules per component.

Step 4: Creating Pages

Example 1: Basic Page (pages/about.js)

Create a new file about.js under the pages directory:

// pages/about.js

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

Accessing the Page:

• The file name about.js automatically creates a route /about.
• Open http://localhost:3000/about in your browser to see the content.

Example 2: Nested Routes (pages/blog/index.js and pages/blog/post.js)

For nested routes like /blog and /blog/post, create the following files:

1. pages/blog/index.js - For the main blog page:

// pages/blog/index.js

export default function Blog() {
  return (
    <div>
      <h1>Blog Page</h1>
      <ul>
        <li><a href="/blog/post">Post 1</a></li>
      </ul>
    </div>
  );
}

2. pages/blog/post.js - For individual posts:

// pages/blog/post.js

export default function Post() {
  return (
    <div>
      <h1>Post 1</h1>
      <p>This is a sample blog post.</p>
    </div>
  );
}

Accessing the Pages:

• Main blog page: http://localhost:3000/blog
• Individual post page: http://localhost:3000/blog/post

Step 5: Dynamic Routes

Sometimes, you need dynamic routes such as /blog/[id]. Here's an example:

1. Create the Dynamic Route File (pages/blog/[id].js):

// pages/blog/[id].js

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Blog Post: {id}</h1>
      <p>This is the content of post: {id}</p>
    </div>
  );
}

2. Modify the Blog Index Page to Link Dynamic Posts:

// pages/blog/index.js

export default function Blog() {
  const posts = [1, 2, 3, 4]; // Sample post IDs

  return (
    <div>
      <h1>Blog Page</h1>
      <ul>
        {posts.map((post) => (
          <li key={post}><a href={`/blog/${post}`}>Post {post}</a></li>
        ))}
      </ul>
    </div>
  );
}

Accessing the Dynamic Pages:

• http://localhost:3000/blog/1, http://localhost:3000/blog/2, etc.

Step 6: Server-Side Rendering (SSR) and Static Site Generation (SSG)

Next.js supports both SSR and SSG. Here, we'll see how to fetch data at build time (SSG) and render it on the server (SSR).

Example 1: Static Site Generation with getStaticProps

This function fetches data once at build time and serves it statically.

1. Create a new file pages/articles.js:

// pages/articles.js

import Link from 'next/link';

export async function getStaticProps() {
  // Fetch articles from an API or database
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  const articles = await res.json();

  return {
    props: {
      articles,
    },
  };
}

export default function Articles({ articles }) {
  return (
    <div>
      <h1>Articles</h1>
      <ul>
        {articles.map(article => (
          <li key={article.id}>
            <Link href={`/articles/${article.id}`}>{article.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

2. Create a dynamic article page pages/articles/[id].js:

// pages/articles/[id].js

import { useRouter } from 'next/router';
import Link from 'next/link';

export async function getStaticProps({ params }) {
  // Fetch a specific article by ID
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const article = await res.json();

  return {
    props: {
      article,
    },
  }
}

export async function getStaticPaths() {
  // Generate paths for all articles dynamically at build time
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  const articles = await res.json();

  const paths = articles.map(article => ({
    params: { id: `${article.id}` }
  }));

  return { paths, fallback: false }
}

export default function Article({ article }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.body}</p>
      <Link href="/articles">
        <a>Back to Articles</a>
      </Link>
    </div>
  )
}

Explanation:

• getStaticProps: Fetches data and passes it as props to the page when it's rendered.
• getStaticPaths: Specifies which dynamic routes to pre-render at build time.

Example 2: Server-Side Rendering with getServerSideProps

This function fetches data on each request.

1. Modify the pages/articles.js to use getServerSideProps:

// pages/articles.js

import Link from 'next/link';

export async function getServerSideProps(context) {
  // Fetch articles every time the page is requested
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  const articles = await res.json();

  return {
    props: {
      articles,
    },
  }
}

export default function Articles({ articles }) {
  return (
    <div>
      <h1>Articles</h1>
      <ul>
        {articles.map(article => (
          <li key={article.id}>
            <Link href={`/articles/${article.id}`}>{article.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

Explanation:

• getServerSideProps: Runs on every request, ensures the data is always fresh but might be slower compared to SSG.

Step 7: Adding API Routes

Next.js enables you to add API routes directly within the pages/api/ directory.

1. Create an API Route (pages/api/greet.js):

// pages/api/greet.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Accessing the API Route:

• Open http://localhost:3000/api/greet in your browser or use any tool (like Postman) to access this endpoint.

2. Calling the API Route from a Page (pages/index.js):

Modify the homepage to call this API route and display the response:

// pages/index.js

import { useEffect, useState } from 'react';

export default function Home() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/greet');
      const { message } = await res.json();
      setMessage(message);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <p>{message}</p>
    </div>
  );
}

Explanation:

• The useEffect hook fetches data from the greet.js API route when the component mounts.
• The fetched data is displayed on the homepage.

Step 8: Styling the Pages

Next.js offers simple ways to manage styling for your pages.

Example 1: Global Styles

You can add global styles in styles/globals.css.

1. Modify styles/globals.css:

/* styles/globals.css */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, p {
  margin: 1rem auto;
  max-width: 800px;
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 1rem;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

2. Ensure the Global Styles Are Applied:

Next.js includes the global style file by default. If you've configured it correctly, these styles should apply across your app.

Example 2: Component-Level Styles (CSS Modules)

Next.js uses CSS Modules for scoped styling.

1. Create a new CSS module file components/Header.module.css:

/* components/Header.module.css */

.header {
  background-color: black;
  color: white;
  padding: 1rem;
  text-align: center;
}

.header a {
  color: white;
  text-decoration: none;
  margin: 0 1rem;
}

.header a:hover {
  text-decoration: underline;
}

2. Create a Header Component using this CSS Module:

// components/Header.js

import styles from './Header.module.css';

export default function Header() {
  return (
    <header className={styles.header}>
      <h1>My Next.js App</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/blog">Blog</a>
        <a href="/articles">Articles</a>
      </nav>
    </header>
  );
}

3. Use the Header Component in Your Pages:

// pages/index.js

import { useEffect, useState } from 'react';
import Header from '../components/Header';

export async function getServerSideProps(context) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  const articles = await res.json();

  return {
    props: {
      articles,
    },
  }
}

export default function Home({ articles }) {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/greet');
      const { message } = await res.json();
      setMessage(message);
    };

    fetchData();
  }, []);

  return (
    <div>
      <Header />
      <h2>Welcome to My Next.js App</h2>
      <p>{message}</p>
    </div>
  );
}

Step 9: Navigation with Link Component

Using the Link component avoids full page refreshes when navigating between routes.

1. Update components/Header.js to use the Link component:

// components/Header.js

import Link from 'next/link';
import styles from './Header.module.css';

export default function Header() {
  return (
    <header className={styles.header}>
      <h1>My Next.js App</h1>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/about">
          <a>About</a>
        </Link>
        <Link href="/blog">
          <a>Blog</a>
        </Link>
        <Link href="/articles">
          <a>Articles</a>
        </Link>
      </nav>
    </header>
  );
}

2. Remove href attributes where Link is used:

You no longer need href attributes inside the Link component. Use as prop instead if required for custom URLs.

Step 10: Optimizing Images

Next.js provides built-in optimization for images.

1. Place images in the public/images directory.

2. Import and use the Image component from Next.js:

// pages/index.js

import { useEffect, useState } from 'react';
import Header from '../components/Header';
import Image from 'next/image';

export async function getServerSideProps(context) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  const articles = await res.json();

  return {
    props: {
      articles,
    },
  }
}

export default function Home({ articles }) {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/greet');
      const { message } = await res.json();
      setMessage(message);
    };

    fetchData();
  }, []);

  return (
    <div>
      <Header />

      <h2>Welcome to My Next.js App</h2>
      <p>{message}</p>

      {/* Optimized Image */}
      <Image
        src="/images/sample_image.png"
        alt="Sample Image"
        width={500}
        height={300}
      />
    </div>
  );
}

Explanation:

• The Image component automatically optimizes images loaded through it.

Conclusion

Next.js provides an extensive set of features that simplify the process of creating modern React applications. By following these steps, you can start building and optimizing websites using server-side rendering, static site generation, and API routes.

Feel free to experiment and dive deeper into the documentation for more advanced topics!

Additional Resources

Official Documentation:

• Next.js Official Docs

Tutorials and Guides:

• Beginner Next.js Tutorial
• Next.js Crash Course

Community and Support:

• Next.js Discord Server
• Stack Overflow Questions Tagged with "Next.js"