Skip to content

πŸš€ Course repository for building fullstack React apps with NextJS 15 βš›οΈπŸ’», covering App Router πŸ“‘, Pages Router πŸ“„, SSR 🌐, data fetching πŸ”„, authentication πŸ”, and more! πŸŽ‰

Notifications You must be signed in to change notification settings

miguelitodev/nextjs-full-stack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

43 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ NextJS 15 Fullstack React Apps - Course Repository

Welcome to the official repository for the NextJS 15 Fullstack React Apps course! πŸŽ‰ This repo contains all the code examples, projects, and resources you need to master NextJS 15, one of the most powerful frameworks for building full-stack React applications. Whether you're building single-page apps or dynamic full-stack projects, this course will guide you step-by-step.

πŸ“š Course Overview

In this course, we dive deep into NextJS 15, covering both the App Router and Pages Router approaches. By the end of the course, you'll have a solid understanding of NextJS core concepts and how to build production-ready applications using React and NextJS.

Key Features:

  • App Router πŸ“‘ vs Pages Router πŸ“„
  • SSR (Server-Side Rendering) 🌐 & Static Site Generation (SSG)
  • Advanced data fetching and pre-fetching πŸ”„
  • Authentication and session management πŸ”
  • Full-stack React apps with API routes or Server Actions πŸ’»
  • Optimizing images, SEO, and metadata πŸ“ΈπŸŒŸ

πŸ§‘β€πŸ« What You Will Learn

  • Build full-stack React apps with NextJS 15 βš›οΈ
  • Understand the differences between the App Router and Pages Router πŸ“˜
  • Implement Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR) 🌍
  • Fetch and pre-fetch data using NextJS techniques πŸ”
  • Create dynamic and static routes πŸ“
  • Integrate authentication and user management πŸ”‘
  • Optimize pages and images for better performance ⚑

πŸ› οΈ Installation & Setup

To get started with the project, clone this repository and install the dependencies.

Step 1: Clone the Repository

git clone https://github.com/miguelitodev/nextjs-full-stack
cd nextjs-full-stack

Now, you should be able to access your NextJS app by visiting http://localhost:3000 in your browser! πŸš€

πŸ“‚ Core Concepts Covered

  1. Routing πŸ“
    NextJS offers both the App Router and Pages Router for defining routes. You'll learn how to work with file-based routing, dynamic routes, and catch-all routes.

  2. Server-Side Rendering (SSR) & Static Site Generation (SSG) 🌐
    NextJS allows for server-side rendering (SSR) and static site generation (SSG), giving you the flexibility to choose the best rendering method for your application. You’ll learn how to optimize performance by pre-rendering pages on the server.

  3. Data Fetching πŸ¦Έβ€β™‚οΈ
    Data fetching is an essential part of any React app. You’ll learn how to fetch data from APIs using NextJS’s getServerSideProps, getStaticProps, and React hooks. We'll also cover Server Actions and API Routes.

  4. Authentication πŸ”’
    You’ll implement authentication in your app, allowing users to sign up, log in, and manage their sessions with ease.

  5. Optimization & SEO πŸ“ˆ
    NextJS includes many built-in optimizations such as image optimization, metadata handling, and SEO-friendly pre-rendering. Learn how to make your app fast and SEO-friendly by using these features.

πŸ§‘β€πŸ’» Technologies Used

  • NextJS 15 πŸš€
  • React 18 βš›οΈ
  • NodeJS πŸ–₯️
  • API Routes πŸ’»
  • CSS Modules πŸ–ŒοΈ
  • PropTypes (for prop validation) πŸ“œ
  • JWT Authentication πŸ”‘

πŸ’‘ Prerequisites

  • Basic knowledge of ReactJS is recommended. ⚑
  • No prior experience with NextJS is requiredβ€”this course will take you from beginner to advanced.
  • If you need a React refresher, check out the "React Refresher" module in the course! πŸ”„

πŸ‘¨β€πŸ’» Instructor

Maximilian SchwarzmΓΌller is a web development expert with over 2 million students worldwide. He is passionate about creating high-quality content and teaching development techniques that help students succeed in their careers. πŸš€

πŸ”— Links

πŸ™ License

This project is licensed under the MIT License - see the LICENSE file for details.


Agora o conteΓΊdo estΓ‘ completo e todo dentro de um ΓΊnico bloco Markdown! Tudo pronto para vocΓͺ copiar e colar.

About

πŸš€ Course repository for building fullstack React apps with NextJS 15 βš›οΈπŸ’», covering App Router πŸ“‘, Pages Router πŸ“„, SSR 🌐, data fetching πŸ”„, authentication πŸ”, and more! πŸŽ‰

Topics

Resources

Stars

Watchers

Forks