Next.js Course – The Complete Hands-On Guide

Welcome to the Next.js Course repository!
This course is a hands-on, project-based series that teaches you Next.js by example. Every significant Next.js topic is covered through structured commits, making it easy to follow and learn.

---

📦 Repository Structure

The current structure of the repository is as follows:

.
├── .gitignore
├── README.md
├── authentication-demo/
├── data-fetching-demo/
├── hello-world/
├── rendering-demo/
├── root-layout/
├── route-handlers-demo/
├── routing-demo/

• hello-world/: Your first introduction to Next.js.
• routing-demo/: Learn about file-based routing and nested routes.
• rendering-demo/: Explore static site generation (SSG), server-side rendering (SSR), and client-side rendering.
• data-fetching-demo/: Understand different data fetching techniques.
• authentication-demo/: Implement authentication in Next.js.
• root-layout/: Master layouts and shared components.
• route-handlers-demo/: Create custom API endpoints with route handlers.

---

📖 Learning Path: Follow the Commits!

Each course section is organized as a sequence of commits, each with a descriptive message highlighting the key concept or feature introduced.
To get the most from this course, go through the commits in order.
You can view the full commit history here.

Key Topics Covered (from commit messages):

• Next.js Basics: Project setup, hello world, file structure, and first page.
• Routing: File-based routing, dynamic routes, nested routes, and route groups.
• Rendering Methods: Static generation, server-side rendering, client-side rendering.
• Data Fetching: getStaticProps, getServerSideProps, client fetching, and loading states.
• API Routes & Route Handlers: Building REST API endpoints directly in Next.js.
• Authentication: Implementing user authentication and protecting routes.
• Layouts & Shared UI: Using app/layout.js, shared navigation, and layout patterns.
• Deployments & Production: Best practices and deployment-ready configuration.

Tip:
The commit messages act as a timeline and a table of contents.
Browse the commits to track your progress and revisit any topic easily.

Note: Only the most recent 30 commits are listed due to API limitations. For the full history, see the Commits page.

---

🚀 How To Use This Course

1. Clone the repo:

   git clone https://github.com/techysanoj/Next.js-Course.git
   cd Next.js-Course

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the relevant demo:

   • Enter the directory for the topic you want to try (e.g., cd routing-demo).
   • Start the dev server:

     npm run dev
     # or
     yarn dev

   • Visit http://localhost:3000.

4. Review the commit log:

   • Run git log --oneline or browse the Commits page.
   • Revert, checkout, or diff any commit to study changes hands-on.

---

🎯 Why Learn From Commits?

This repo is structured so that every commit is a valuable lesson.

• See step-by-step code evolution.
• Understand WHY and HOW each feature is added.
• Use commit diffs to deeply understand Next.js concepts.

---

🤝 Contributing & Feedback

Feel free to open issues or pull requests for improvements, corrections, or to suggest new topics!

---

Happy learning!
Created and maintained by techysanoj