{"id":26499671,"url":"https://github.com/grb-workspace/nextjs-15-intro","last_synced_at":"2026-05-08T07:34:52.776Z","repository":{"id":283482295,"uuid":"951887645","full_name":"GRB-Workspace/Nextjs-15-Intro","owner":"GRB-Workspace","description":"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.","archived":false,"fork":false,"pushed_at":"2025-03-20T12:47:42.000Z","size":26,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-20T14:06:19.586Z","etag":null,"topics":["authentication","clerk","client-components","data-fetching","layouts","nextjs","react","routing","server-actions","server-components","starter","tutorial"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GRB-Workspace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-20T11:58:44.000Z","updated_at":"2025-03-20T12:54:51.000Z","dependencies_parsed_at":"2025-03-20T14:06:22.994Z","dependency_job_id":"78178a6a-74d0-44cc-bb21-f84d27585c3a","html_url":"https://github.com/GRB-Workspace/Nextjs-15-Intro","commit_stats":null,"previous_names":["grb-workspace/nextjs-15-intro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/GRB-Workspace/Nextjs-15-Intro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GRB-Workspace%2FNextjs-15-Intro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GRB-Workspace%2FNextjs-15-Intro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GRB-Workspace%2FNextjs-15-Intro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GRB-Workspace%2FNextjs-15-Intro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GRB-Workspace","download_url":"https://codeload.github.com/GRB-Workspace/Nextjs-15-Intro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GRB-Workspace%2FNextjs-15-Intro/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262137149,"owners_count":23264675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","clerk","client-components","data-fetching","layouts","nextjs","react","routing","server-actions","server-components","starter","tutorial"],"created_at":"2025-03-20T15:18:23.096Z","updated_at":"2026-05-08T07:34:52.553Z","avatar_url":"https://github.com/GRB-Workspace.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/GRB-Workspace/Nextjs-15-Intro.git\"\u003e\n    \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/8/8e/Nextjs-logo.svg\" alt=\"Next.js Logo\" width=\"90\" height=\"90\"\u003e\n  \u003c/a\u003e\n\n\u003ch2 align=\"center\"\u003eNext.js 15 Intro\u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n    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.\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003cstrong\u003e\n      Next.js 15 Note:\n      \u003ca href=\"https://drive.google.com/file/d/1YWuDfpHDHyjStMxx2Kab5XxOyR21goeE/view?usp=sharing\" target=\"_blank\"\u003e\n        Next.js 15 Crash Course\n      \u003c/a\u003e\n    \u003c/strong\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    ·\n    \u003ca href=\"https://github.com/GRB-Workspace/Nextjs-15-Intro/issues/new?labels=bug\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/GRB-Workspace/Nextjs-15-Intro/issues/new?labels=enhancement\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\u003c/li\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#core-features\"\u003eCore Features\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cli\u003e\u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\u003c/li\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation-and-setup\"\u003eInstallation \u0026 Setup\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#project-structure\"\u003eProject Structure\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cli\u003e\u003ca href=\"#resources\"\u003eResources\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#references\"\u003eReferences\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n---\n\n## About The Project\n\n**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**.\n\nThis repository is designed for developers who want a quick yet comprehensive guide to jump-start their Next.js 15 projects.\n\n### Core Features\n\n- **React Server Components (RSC)**\n    - Default server-side rendering for better performance and SEO.\n    - Client-side interactivity enabled via `\"use client\";` directive.\n\n- **File-Based Routing**\n    - Organize routes within the `app` folder.\n    - Automatic route creation for each `page.tsx`.\n\n- **Layouts**\n    - Create reusable layouts to share common UI elements (headers, footers, etc.).\n    - Nested layouts for more granular control.\n\n- **Route Handlers**\n    - Custom RESTful endpoints using `route.ts` files.\n    - Ideal for handling form submissions, database interactions, or API requests.\n\n- **Server Actions**\n    - “use server” directive to handle server-side logic.\n    - Cache revalidation (`revalidatePath`) for dynamic content updates.\n\n- **Data Fetching**\n    - Server components for secure, high-performance data retrieval.\n    - Client components for real-time or highly interactive data fetching.\n\n- **Authentication with Clerk**\n    - Simple sign-in, sign-up, and session management.\n    - Protect routes with Clerk middleware and read user data with server/client hooks.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n---\n\n### Built With\n\n- **[Next.js 15](https://nextjs.org/)** – Core framework\n- **React** – Front-end library for building user interfaces\n- **TypeScript** – Type-safe development\n- **[Clerk](https://clerk.com/)** – Authentication service\n- **Node.js** – Backend runtime environment\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n---\n\n## Getting Started\n\nFollow these instructions to clone, set up, and run the **Next.js 15 Intro** project locally.\n\n### Prerequisites\n\n- **Node.js** (v20+ recommended)\n- **npm** or **yarn** (latest version preferred)\n- **Git** (to clone the repository)\n\n### Installation and Setup\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/GRB-Workspace/Nextjs-15-Intro.git\n   cd Nextjs-15-Intro\n   ```\n\n2. **Install dependencies:**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Run the development server:**\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n4. **Open your browser:**\n\n   Visit `http://localhost:3000` to explore the sample Next.js 15 project.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n---\n\n### Project Structure\n\nBelow is a simplified view of the core folders and files:\n\n```plaintext\n.\n├── app/\n│   ├── (auth)/\n│   │   ├── forgot-password/\n│   │   ├── login/\n│   │   └── register/\n│   ├── about/\n│   │   └── page.tsx\n│   ├── blog/\n│   │   └── first-post/\n│   │       └── page.tsx\n│   ├── mock-users/\n│   │   └── page.tsx\n│   ├── products/\n│   │   └── page.tsx\n│   ├── users-client/\n│   │   └── page.tsx\n│   ├── users-server/\n│   │   └── page.tsx\n│   ├── layout.tsx\n│   └── page.tsx\n├── public/\n├── src/\n│   ├── middleware.ts\n│   └── ...\n├── .env.local\n├── .gitignore\n├── package.json\n├── README.md\n└── tsconfig.json\n```\n\n- **`app/`** – Houses all routes (`page.tsx`) and nested layouts (`layout.tsx`).\n- **`(auth)/`** – Example authentication routes (login, register, forgot password).\n- **`users-server/`** \u0026 **`users-client/`** – Demonstrates server vs. client component usage.\n- **`middleware.ts`** – Clerk authentication middleware configuration.\n- **`.env.local`** – Store environment variables (keys, secrets) locally.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n---\n\n## Resources\n\nHere are some helpful links and resources used throughout this project:\n\n- **[Next.js Official Tutorial](https://nextjs.org/learn)**  \n  Comprehensive guide for beginners and experienced developers alike.\n\n- **[JSONPlaceholder](https://jsonplaceholder.typicode.com/)**  \n  Free fake REST API for testing and prototyping.\n\n- **[MockAPI](https://mockapi.io/)**  \n  Another excellent tool for generating mock APIs.\n\n- **[Clerk](https://clerk.com/)**  \n  Simple and secure authentication for your Next.js apps.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n---\n\n## References\n\n- **YouTube Video:** [Next.js 15 Crash Course](https://youtu.be/_EgI9WH8q1A?si=fGSrVzbUua29yi-2)  \n  A video walkthrough highlighting Next.js 15 quick walkthrough and new features.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n---\n\n## Contact\n\n- **Repository Link:** [Nextjs-15-Intro](https://github.com/GRB-Workspace/Nextjs-15-Intro.git)\n- **Email:** [grbulegoda@gmail.com](mailto:grbulegoda@gmail.com)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    \u0026copy; 2025 Gayanuka Bulegoda\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrb-workspace%2Fnextjs-15-intro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrb-workspace%2Fnextjs-15-intro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrb-workspace%2Fnextjs-15-intro/lists"}