Building Modern Websites with Next.js 15

Next.js has become the go-to framework for building modern web applications with React. With the release of Next.js 15 and React 19, there are even more powerful features available to developers.

Why Next.js?

Next.js offers several advantages over a traditional React application:

• Server-Side Rendering (SSR): Improves performance and SEO
• Static Site Generation (SSG): Pre-renders pages at build time for even faster loading
• App Router: Simplified routing with nested layouts and loading states
• API Routes: Build API endpoints directly within your Next.js application
• Image Optimization: Automatic image optimization with the Next.js Image component

Getting Started

Let's start by setting up a new Next.js project:

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

During the setup, you'll be asked several questions:

• Would you like to use TypeScript? Yes
• Would you like to use ESLint? Yes
• Would you like to use Tailwind CSS? Yes
• Would you like to use the src/ directory? Yes
• Would you like to use the App Router? Yes
• Would you like to customize the default import alias? No

App Router Structure

Next.js 15's App Router uses a file-system based router built on top of React Server Components. Here's a basic example of the folder structure:

src/
├── app/
│   ├── layout.tsx      # Root layout (applies to all routes)
│   ├── page.tsx        # Home page (/)
│   ├── about/
│   │   └── page.tsx    # About page (/about)
│   └── blog/
│       ├── page.tsx    # Blog index page (/blog)
│       └── [slug]/
│           └── page.tsx # Individual blog post page (/blog/post-1)

Server Components vs. Client Components

Next.js 15 makes heavy use of React Server Components, which allow you to render components on the server for improved performance.

// Server Component (default)
export default function ServerComponent() {
  return <div>This component is rendered on the server</div>;
}

"use client";
 
// Client Component
export default function ClientComponent() {
  return <div>This component is rendered on the client</div>;
}

Data Fetching

Next.js 15 provides powerful data fetching capabilities:

// Server Component with data fetching
export default async function Page() {
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();
 
  return <div>{json.message}</div>;
}

Conclusion

Next.js 15 is a powerful framework for building modern web applications. By leveraging server components, the app router, and other features, you can create fast, SEO-friendly websites that provide a great user experience.

In my next post, I'll dive deeper into using Tailwind CSS with Next.js to create beautiful, responsive designs. Stay tuned!