OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Master Next.js 14 - Full-Stack Complete Guide

Piotr Jura | 57,000+ Students

Hey there. I've put together this Next.js 14 course for folks starting from scratch. Whether you're aiming for a job or want to build your own apps, this course has you covered. Don't worry if you're new to JavaScript or React - I'll point you to some good resources to get started.

What We'll Build:

  • A portfolio and blog site

  • A personal finance app

What You'll Learn: We'll cover Next.js, a full-stack React framework. You'll get hands-on with UI design, data management, user authentication, and styling with Tailwind CSS. We'll also deploy our projects on Vercel.

Read more

Hey there. I've put together this Next.js 14 course for folks starting from scratch. Whether you're aiming for a job or want to build your own apps, this course has you covered. Don't worry if you're new to JavaScript or React - I'll point you to some good resources to get started.

What We'll Build:

  • A portfolio and blog site

  • A personal finance app

What You'll Learn: We'll cover Next.js, a full-stack React framework. You'll get hands-on with UI design, data management, user authentication, and styling with Tailwind CSS. We'll also deploy our projects on Vercel.

After the Course: You'll have a solid foundation in full-stack development. These are skills that usually take a while to learn, but you'll get a good grasp of how to build and deploy complete web applications.

Course Structure:

  • Learn at your own pace - each section is about 2 hours long

  • Code along with the videos or skip ahead if you're familiar with some parts

  • Beginner-friendly with extra resources for JavaScript, React, and SQL basics

  • I'll explain the 'why' behind what we're doing and link to relevant docs

What Makes This Course Different:

  • Up-to-date content using current best practices

  • Step-by-step approach, not just diving in without explanation

  • We'll actually finish and deploy our projects

How It Works:

  • Go at your own speed - 30 minutes a day or longer sessions, whatever works for you

  • Build practical projects you can use and talk about in interviews

  • Source code for each step, detailed videos, and a Discord chat for help when you need it

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout. Valid until January 1, 2025
New customers offer
Visit Udemy from OpenCourser as a new customer and claim these savings on your first order.
Up to
80%
off
UDEAFNULP2024

What's inside

Learning objectives

  • Build fullstack react apps with next & app router
  • Master react server components, client components, and server actions
  • Implement advanced data fetching, caching, and state management
  • Learn through hands-on projects and real-world examples
  • Implement server-side rendering (ssr) and static site generation (ssg)
  • Create responsive uis with tailwind css and custom components
  • Optimize performance, seo, and implement dark/light mode
  • Integrate supabase for powerful backend functionality
  • Handle user authentication, authorization, and file management
  • Deploy production-ready applications on vercel
  • Master form handling and data validation with zod
  • Implement error handling and custom error pages
  • Learn image optimization and font management techniques
  • Utilize markdown and mdx for flexible content management
  • Show more
  • Show less

Syllabus

Getting Started: Begin Here!

Let's begin by seeing what's missing in React. React is a UI library, and it wasn't designed to be a full-stack framework.

Read more

Next.js is a full-stack framework, on the other hand. It's not only about UIs it's about routing, pages, layouts - and more importantly data fetching, caching and data mutations.

Server Actions complete the picture. They let you mutate data easily, and combined with Next.js caching - you can forget about useEffect and libraries like TanStack Query or SWR!

Getting Started: Creating a Next.js Project and Overview
Creating a Next.js Project
Next.js Project Structure
React 101 (Watch if You Are New to React!)
Section Introduction: React 101
What is React?
Understanding JSX Syntax
Components as the Basic UI Building Blocks
Component Props (Passing Data to Components)
Responding to Events
Keeping Component State using Hooks (useState)
Conditional Rendering
Rendering List of Elements
Importing and Exporting Components
Next.js 101: Routing, Pages & Layouts
Section Introduction: Routing, Pages & Layouts
File-system Routing & Creating Pages
Layouts (UI Shared Between Pages)
Links and Navigation
Understand Prefetching and Caching
Dynamic Routes with Parameters
Next.js 101: Data Fetching (and Caching!)
Section Introduction: Data Fetching (and Caching!)
How Data Fetching Works in Next.js (Explanation and Recommendations)
Running a Mock JSON Server
Actually Fetching Data with fetch inside a Server Component
Understanding Data Cache and Request Memoization
Fetch Cache in Practice
Next.js 101: Dealing with Slow Data Sources (Suspense, Loading UI & Streaming)
Section Introduction: Dealing with Slow Data Sources
How a Slow Data Source Can Block Your Whole Page!
Loading UI and Streaming
Loading UI and React Suspense
When to Use React Suspense? When Loading UI? Differences?
About Streaming and SSR
Next.js 101: Styling With Tailwind and CSS Modules
Section Introduction: Styling With Tailwind and CSS Modules
Styling Options in Next.js
Getting Started with Tailwind CSS
Flex Container & Responsive Design
Adding a CSS Module and Using Tailwind Inside
Positioning Elements with Flex
Using Grid and Making Customizable Components
Next.js 101: Error Management in Next
Section Introduction: Error Management in Next
Error Handling on Pages
Error Boundaries
Error Hierarchy - Where Does the Error Get Catched?
Nested Layouts
Error Handling in Layouts and in the Root Layout
Recovering from the Errors
Custom Not Found (404) Page
Next.js 101: Images and Image Optimizations
Section Introduction: Images and Image Optimizations
Problems with Images
Core Web Vitals, LCP, CLS and Optimizing Images
Adding Image Gallery (Not Optimized Yet!)
Using the Next Component for Automatic Optimization
Responsive Image Size
Placeholders & Image Quality
Measuring the Page with Lighthouse
Next.js 101: Fonts, Dynamic OpenGraph Images, Assets & Metadata (SEO)
Section Introduction: Fonts, OpenGraph, Scrips, Metadata
Optimizing Fonts with Next.js (Google and Local Fonts!)
Optimizing Scripts (Connecting with External Services like Analytics, Chatbots)
Introduction to Metadata
An Overview of Metadata Attributes
Static Metadata
Dynamic Metadata
Dynamic (OpenGraph) Image Generation
Blog Project: Markdown and MDX
Section Introduction: Markdown and MDX
Setting Up Markdown and MDX and First MDX Page!
Styling MDX - Tailwind Typography
MDX Remote (Rendering any Markdown)
Loading MDX From Files (Blog Posts)
Blog Project: Metadata, Frontmatter, Post List
Section Introduction: Blog Project: Metadata, Frontmatter, Post List
Metadata #1 - What's Frontmatter and Refactor Time #1
Metadata #2 - Extracting Frontmatter and Content, Refactor Time #2
Blog Post List - Fetching Metadata of All Files
Blog Post List - Links
Blog Project: Caching, Filtering, Sorting, Pagination
Section Introduction: Caching, Filtering, Sorting, Pagination
Performance Improvements and Refactoring - Using cache for Memoization
Tags and Filtering Using Search Query Params
Sorting Posts - Using Query Params for State #1
Change Sort Order - Using Query Params for State #2
Adding Pagination - Using Query Params for State #3
Pagination Component - Pages #1
Pagination Component - Links #2
Blog Project: Custom HTML, Tags, Dark Mode, Cookies
Section Introduction: Custom HTML, Tags, Dark Mode, Cookies
Customizing HTML Generated from Markdown
Tags on Blog Post
Dark Mode Toggling - Component #1

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Provides a comprehensive foundation in full-stack web development
Applicable to both professional and personal skill development
Offers hands-on projects for practical skill development
Scope includes in-demand technologies like Next.js, Tailwind CSS, and Supabase
Develops expertise in modern development practices, such as server-side rendering and data caching
Employs a step-by-step approach, making it suitable for beginners with limited JavaScript, React, and SQL knowledge

Save this course

Save Master Next.js 14 - Full-Stack Complete Guide to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Master Next.js 14 - Full-Stack Complete Guide with these activities:
Practice writing SQL queries
Master SQL, a fundamental skill for accessing and manipulating data.
Browse courses on SQL
Show steps
  • Create a simple database
  • Write basic SELECT queries
  • Write queries with filters and sorting
  • Write queries to join tables
Attend a virtual meetup or conference on React or Next.js
Connect with other developers and learn about industry trends.
Browse courses on React
Show steps
  • Find a virtual meetup or conference
  • Register for the event
  • Attend the event and participate in discussions
React Fundamentals Practice
Strengthen your understanding of React concepts by revisiting the basics.
Browse courses on React Components
Show steps
  • Review the documentation for React components.
  • Create a basic React application with components.
  • Practice managing state in React components.
Nine other activities
Expand to see all activities and additional details
Show all 12 activities
Practice writing React components
Gain proficiency in the core building blocks of React applications.
Browse courses on React Components
Show steps
  • Create a simple React component
  • Use props to pass data to a React component
  • Handle events in React components
  • Use state to manage data within React components
Participate in a React or Next.js workshop
Gain hands-on experience and learn from experts in the field.
Browse courses on React
Show steps
  • Find a React or Next.js workshop
  • Register for the workshop
  • Attend the workshop and complete the activities
Follow a tutorial on React Redux
Expand your understanding of state management in React applications.
Browse courses on Redux
Show steps
  • Find a reputable tutorial on React Redux
  • Follow the tutorial step-by-step
  • Implement React Redux in a personal project
Study Group Discussions
Collaborate with peers to enhance your learning experience.
Show steps
  • Join or form a study group with other students taking the same course.
  • Meet regularly to discuss course material, share insights, and work through problems together.
Build a personal blog with portfolio
Solidify React, REST APIs, and UI/UX skills by developing a real-world web application.
Show steps
  • Plan your blog's structure and design
  • Implement the blog's backend with a REST API
  • Create the frontend with React and style it with Tailwind CSS
  • Integrate the frontend and backend
  • Deploy your blog to Vercel
Personal Website
Create a practical project to showcase your skills and deepen your understanding.
Show steps
  • Plan and design your website.
  • Build the frontend using React and Next.js.
  • Implement a content management system using Supabase.
  • Deploy your website to a hosting platform.
Write a blog post about your experience learning Next.js
Reflect on and reinforce your understanding of Next.js by sharing your knowledge.
Browse courses on Next.js
Show steps
  • Choose a specific topic related to Next.js
  • Research and gather information on the topic
  • Write a draft of your blog post
  • Edit and refine your blog post
  • Publish your blog post on a platform like Medium or Dev.to
Develop a React application using Next.js and deploy it to Vercel
Demonstrate your ability to build and deploy a complete web application using Next.js.
Browse courses on Next.js
Show steps
  • Plan your application's features and design
  • Build the frontend of your application with Next.js and Tailwind CSS
  • Implement the backend of your application with a REST API
  • Integrate the frontend and backend
  • Deploy your application to Vercel
Full-Stack Application Project
Apply your skills to build a complete web application.
Show steps
  • Design and plan your application.
  • Develop the frontend and backend components.
  • Implement data fetching, state management, and user authentication.
  • Deploy your application to a hosting platform.

Career center

Learners who complete Master Next.js 14 - Full-Stack Complete Guide will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Master Next.js 14 - Full-Stack Complete Guide.
React 18 with Next.js Playbook
Most relevant
Next.js 13 Fundamentals
Most relevant
Complete React, Next.js & TypeScript Projects Course 2024
Most relevant
Next.js 14 & React - The Complete Guide
Most relevant
Building Server-side Rendered React Apps for Beginners
Most relevant
Full Stack Markdown App With Next.js
Most relevant
Node with React: Fullstack Web Development
Most relevant
Advanced React & Storybook: From Components Library to...
The Complete React Native + Hooks Course
Course image
Effort
24.5 total hours
Via
Udemy
Instructor
Piotr Jura | 57,000+ Students
Language
English
Good to know
Provides a comprehensive foundation in full-stack web development
Applicable to both professional and personal skill development
Offers hands-on projects for practical skill development
Scope includes in-demand technologies like Next.js, Tailwind CSS, and Supabase
Develops expertise in modern development practices, such as server-side rendering and data caching
Employs a step-by-step approach, making it suitable for beginners with limited JavaScript, React, and SQL knowledge
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser