A Comprehensive Guide to Using Next.js with JavaScript

April 8, 2025

4 min read

A Comprehensive Guide to Using Next.js with JavaScript

Next.js is a powerful, production-ready React framework that enables developers to create fast, scalable web applications with minimal effort. It offers a variety of features, including server-side rendering (SSR), static site generation (SSG), API routes, and automatic code splitting. This blog post will guide you through the basics of Next.js, provide a step-by-step tutorial on setting it up, and cover common troubleshooting tips.

What is Next.js?

Next.js is a React-based framework designed to create both static and dynamic websites. It provides a set of tools that make React development easier and more efficient. It supports:

• Automatic Static Optimization: Automatically optimizes pages that don’t require dynamic data fetching.
• Server-Side Rendering (SSR): Allows rendering of pages on the server for better SEO and faster initial load.
• API Routes: Allows backend code to be written directly inside the app for serverless functions.
• File-based Routing: The file structure determines the routing, so there’s no need for a router library.

Why Use Next.js?

Here are a few reasons why developers choose Next.js:

• SEO Friendly: Server-side rendering (SSR) ensures that search engines can index your site efficiently.
• Fast Performance: It includes features like static site generation (SSG) and code splitting for faster load times.
• Built-in Routing: No need for third-party libraries; file-based routing is simple and intuitive.
• Hybrid Pages: It lets you mix static and dynamic content on the same page.
• Zero Config: Next.js works out of the box without needing additional configuration.

Setting Up a Next.js Project

Installation

To get started with Next.js, you need Node.js and npm (or Yarn) installed on your computer. You can check if they are installed by running:

node -v
npm -v

If both are installed, you can create a Next.js project by running the following commands:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

This creates a new Next.js app in the my-next-app directory and starts the development server.

Creating Pages

Next.js uses file-based routing. Any file you create in the pages directory will automatically become a route. Here’s an example:

1. Inside the pages folder, create a new file called about.js:

// pages/about.js
function About() {
  return <h1>About Us</h1>;
}

export default About;

2. Now, visit http://localhost:3000/about to see your page.

Creating API Routes

You can create backend API routes inside the pages/api directory. These API routes are serverless functions.

1. Create an api/hello.js file:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello from Next.js!" });
}

2. Now you can make a request to http://localhost:3000/api/hello to see the JSON response.

Understanding Rendering Strategies in Next.js

Next.js provides several ways to render pages, each with its use cases.

Static Generation (SSG)

Static Generation allows you to pre-render pages at build time. This is useful for content that doesn’t change often.

// pages/index.js
export async function getStaticProps() {
  return {
    props: { message: "This page is statically generated" },
  };
}

function HomePage({ message }) {
  return <h1>{message}</h1>;
}

export default HomePage;

Server-Side Rendering (SSR)

Server-Side Rendering generates the page on every request. This is useful for dynamic content that changes frequently.

// pages/index.js
export async function getServerSideProps() {
  return {
    props: { message: "This page is server-side rendered" },
  };
}

function HomePage({ message }) {
  return <h1>{message}</h1>;
}

export default HomePage;

Incremental Static Regeneration (ISR)

ISR allows you to update static pages after the site has been built without needing a full rebuild.

// pages/index.js
export async function getStaticProps() {
  return {
    props: { message: "This page is using ISR" },
    revalidate: 10, // Page will revalidate every 10 seconds
  };
}

function HomePage({ message }) {
  return <h1>{message}</h1>;
}

export default HomePage;

Client-Side Rendering (CSR)

Client-Side Rendering loads content after the page is rendered on the client-side. This can be done with React hooks like useEffect.

import { useEffect, useState } from "react";

function HomePage() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("/api/hello")
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  }, []);

  return <h1>{message}</h1>;
}

export default HomePage;

Styling in Next.js

Next.js supports a variety of styling options:

Global Styles

To add global styles, create a styles/global.css file and import it in pages/_app.js.

/* styles/global.css */
body {
  font-family: Arial, sans-serif;
}

// pages/_app.js
import "../styles/global.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

CSS Modules

Next.js supports CSS Modules out of the box, which allows you to scope CSS to individual components.

/* styles/Home.module.css */
.container {
  padding: 20px;
  background-color: lightgray;
}

// components/Home.js
import styles from "../styles/Home.module.css";

function Home() {
  return <div className={styles.container}>Hello, World!</div>;
}

export default Home;

Styled Components

Styled Components is a popular CSS-in-JS library that works seamlessly with Next.js.

npm install styled-components

// components/Home.js
import styled from "styled-components";

const Container = styled.div`
  padding: 20px;
  background-color: lightgray;
`;

function Home() {
  return <Container>Hello, World!</Container>;
}

export default Home;

Troubleshooting Common Next.js Issues

Page Not Found Error

This error usually occurs when Next.js cannot find the file that corresponds to the requested route. Double-check your file names and ensure that the route corresponds correctly to the file in the pages folder.

Static File Not Found

Static files should be placed inside the public directory. Ensure that images or other assets are referenced correctly:

<img src="/images/my-image.jpg" alt="My Image" />

If you place the image in the public/images/ folder, the correct path would be /images/my-image.jpg.

Slow Initial Load

If your Next.js app is loading slowly, consider using getStaticProps or getServerSideProps to pre-render content. Additionally, check for any large JavaScript bundles and optimize them using dynamic imports:

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("./HeavyComponent"));

function Page() {
  return <HeavyComponent />;
}

Build Errors

Build errors can happen due to misconfigured dependencies, incorrect versions, or broken components. Review the error stack trace and ensure that all required dependencies are installed. Running npm run build in the terminal should provide more details on what went wrong.

Conclusion

Next.js is a versatile framework that simplifies React development by providing powerful features like SSR, SSG, and automatic code splitting. With this guide, you should have a strong understanding of how to set up a Next.js project, use different rendering strategies, and troubleshoot common issues.

By leveraging its built-in features, you can build fast, scalable, and SEO-friendly web applications with ease.