Next.js 15 Intro

A quick-start project demonstrating the new features and best practices of Next.js 15, including React Server Components, file-based routing, layouts, server actions, data fetching, and Clerk authentication.

Next.js 15 Note: Next.js 15 Crash Course

· Report Bug · Request Feature

---

Table of Contents

1. About The Project
• Core Features
• Built With
2. Getting Started
• Prerequisites
• Installation & Setup
• Project Structure
3. Resources
4. References
5. Contact

---

About The Project

Next.js 15 Intro is a sample repository showcasing the latest features and best practices of Next.js 15. It demonstrates how to effectively utilize React Server Components, file-based routing, layouts, route handlers, server actions, data fetching strategies, and authentication with Clerk.

This repository is designed for developers who want a quick yet comprehensive guide to jump-start their Next.js 15 projects.

Core Features

• React Server Components (RSC)

  • Default server-side rendering for better performance and SEO.
  • Client-side interactivity enabled via "use client"; directive.

• File-Based Routing

  • Organize routes within the app folder.
  • Automatic route creation for each page.tsx.

• Layouts

  • Create reusable layouts to share common UI elements (headers, footers, etc.).
  • Nested layouts for more granular control.

• Route Handlers

  • Custom RESTful endpoints using route.ts files.
  • Ideal for handling form submissions, database interactions, or API requests.

• Server Actions

  • “use server” directive to handle server-side logic.
  • Cache revalidation (revalidatePath) for dynamic content updates.

• Data Fetching

  • Server components for secure, high-performance data retrieval.
  • Client components for real-time or highly interactive data fetching.

• Authentication with Clerk

  • Simple sign-in, sign-up, and session management.
  • Protect routes with Clerk middleware and read user data with server/client hooks.

(back to top)

---

Built With

• Next.js 15 – Core framework
• React – Front-end library for building user interfaces
• TypeScript – Type-safe development
• Clerk – Authentication service
• Node.js – Backend runtime environment

(back to top)

---

Getting Started

Follow these instructions to clone, set up, and run the Next.js 15 Intro project locally.

Prerequisites

• Node.js (v20+ recommended)
• npm or yarn (latest version preferred)
• Git (to clone the repository)

Installation and Setup

1. Clone the repository:

   git clone https://github.com/GRB-Workspace/Nextjs-15-Intro.git
   cd Nextjs-15-Intro

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

4. Open your browser:

   Visit http://localhost:3000 to explore the sample Next.js 15 project.

(back to top)

---

Project Structure

Below is a simplified view of the core folders and files:

.
├── app/
│   ├── (auth)/
│   │   ├── forgot-password/
│   │   ├── login/
│   │   └── register/
│   ├── about/
│   │   └── page.tsx
│   ├── blog/
│   │   └── first-post/
│   │       └── page.tsx
│   ├── mock-users/
│   │   └── page.tsx
│   ├── products/
│   │   └── page.tsx
│   ├── users-client/
│   │   └── page.tsx
│   ├── users-server/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── src/
│   ├── middleware.ts
│   └── ...
├── .env.local
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json

• app/ – Houses all routes (page.tsx) and nested layouts (layout.tsx).
• (auth)/ – Example authentication routes (login, register, forgot password).
• users-server/ & users-client/ – Demonstrates server vs. client component usage.
• middleware.ts – Clerk authentication middleware configuration.
• .env.local – Store environment variables (keys, secrets) locally.

(back to top)

---

Resources

Here are some helpful links and resources used throughout this project:

• Next.js Official Tutorial
  Comprehensive guide for beginners and experienced developers alike.

• JSONPlaceholder
  Free fake REST API for testing and prototyping.

• MockAPI
  Another excellent tool for generating mock APIs.

• Clerk
  Simple and secure authentication for your Next.js apps.

(back to top)

---

References

• YouTube Video: Next.js 15 Crash Course
  A video walkthrough highlighting Next.js 15 quick walkthrough and new features.

(back to top)

---

Contact

• Repository Link: Nextjs-15-Intro
• Email: grbulegoda@gmail.com

(back to top)

---

© 2025 Gayanuka Bulegoda

---