https://github.com/grb-workspace/nextjs-15-intro
Sample repository showcasing the core features and best practices of Next.js 15. This project covers React Server Components vs. Client Components, file-based routing, layouts, route handlers, server actions, data fetching strategies, and authentication using Clerk.
https://github.com/grb-workspace/nextjs-15-intro
authentication clerk client-components data-fetching layouts nextjs react routing server-actions server-components starter tutorial
Last synced: about 1 month ago
JSON representation
Sample repository showcasing the core features and best practices of Next.js 15. This project covers React Server Components vs. Client Components, file-based routing, layouts, route handlers, server actions, data fetching strategies, and authentication using Clerk.
- Host: GitHub
- URL: https://github.com/grb-workspace/nextjs-15-intro
- Owner: GRB-Workspace
- Created: 2025-03-20T11:58:44.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-03-20T12:47:42.000Z (about 1 month ago)
- Last Synced: 2025-03-20T14:06:19.586Z (about 1 month ago)
- Topics: authentication, clerk, client-components, data-fetching, layouts, nextjs, react, routing, server-actions, server-components, starter, tutorial
- Language: TypeScript
- Homepage:
- Size: 25.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
---
## 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.
---
### Built With
- **[Next.js 15](https://nextjs.org/)** – Core framework
- **React** – Front-end library for building user interfaces
- **TypeScript** – Type-safe development
- **[Clerk](https://clerk.com/)** – Authentication service
- **Node.js** – Backend runtime environment
---
## 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:**
```bash
git clone https://github.com/GRB-Workspace/Nextjs-15-Intro.git
cd Nextjs-15-Intro
```
2. **Install dependencies:**
```bash
npm install
# or
yarn install
```
3. **Run the development server:**
```bash
npm run dev
# or
yarn dev
```
4. **Open your browser:**
Visit `http://localhost:3000` to explore the sample Next.js 15 project.
---
### Project Structure
Below is a simplified view of the core folders and files:
```plaintext
.
├── 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.
---
## Resources
Here are some helpful links and resources used throughout this project:
- **[Next.js Official Tutorial](https://nextjs.org/learn)**
Comprehensive guide for beginners and experienced developers alike.
- **[JSONPlaceholder](https://jsonplaceholder.typicode.com/)**
Free fake REST API for testing and prototyping.
- **[MockAPI](https://mockapi.io/)**
Another excellent tool for generating mock APIs.
- **[Clerk](https://clerk.com/)**
Simple and secure authentication for your Next.js apps.
---
## References
- **YouTube Video:** [Next.js 15 Crash Course](https://youtu.be/_EgI9WH8q1A?si=fGSrVzbUua29yi-2)
A video walkthrough highlighting Next.js 15 quick walkthrough and new features.
---
## Contact
- **Repository Link:** [Nextjs-15-Intro](https://github.com/GRB-Workspace/Nextjs-15-Intro.git)
- **Email:** [[email protected]](mailto:[email protected])
---
© 2025 Gayanuka Bulegoda
---