Getting Started with Next.js 14

Next.js 14 brings exciting improvements to the already powerful React framework. In this guide, we'll walk through setting up a new Next.js project and explore some of the key features that make Next.js a great choice for modern web development.

What is Next.js?

Next.js is a React framework that provides a comprehensive solution for building production-ready web applications. It offers features like:

• Server-side rendering (SSR)
• Static site generation (SSG)
• API routes
• Automatic code splitting
• Built-in CSS and Sass support
• Image optimization

Setting Up Your First Project

To create a new Next.js application, you'll need Node.js installed on your system. Then run:

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

This will create a new Next.js project with the latest recommended configuration.

Understanding the App Router

The App Router, introduced in Next.js 13.4, represents a paradigm shift in how we build Next.js applications. Instead of a pages directory, we use an app directory with special file conventions:

• page.tsx - Defines a unique route
• layout.tsx - Shared UI between routes
• loading.tsx - Loading UI for routes
• error.tsx - Error handling for routes
• not-found.tsx - 404 page for routes

Creating Your First Page

Let's create a simple about page. Create a new file at app/about/page.tsx:

export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our about page!</p>
    </div>
  );
}

That's it! Next.js automatically creates the route at /about and handles all the routing for you.

Styling in Next.js

Next.js supports multiple styling approaches:

CSS Modules

import styles from "./styles.module.css";

export default function Component() {
  return <div className={styles.container}>Content</div>;
}

Tailwind CSS

export default function Component() {
  return <div className="container mx-auto p-4">Content</div>;
}

CSS-in-JS

import styled from "styled-components";

const Container = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
`;

Data Fetching

Next.js 14 introduces powerful data fetching patterns:

Server Components

async function getUser(id: string) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json();
}

export default async function UserProfile({
  params,
}: {
  params: { id: string };
}) {
  const user = await getUser(params.id);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Client Components

"use client";

import { useState, useEffect } from "react";

export default function ClientComponent() {
  const [data, setData] = useState(null);

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

  return <div>{data ? data.message : "Loading..."}</div>;
}

Deployment

Deploying a Next.js app is straightforward with platforms like Vercel:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Vercel automatically builds and deploys your app

Conclusion

Next.js 14 with the App Router provides a powerful foundation for building modern web applications. Its combination of performance, developer experience, and flexibility makes it an excellent choice for projects of any size.

Start experimenting with these concepts, and you'll quickly see why Next.js has become so popular in the React ecosystem.