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.

• 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)

• 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)

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

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

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)

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)

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)

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

(back to top)

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

(back to top)