We may earn an affiliate commission when you visit our partners.
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.
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.
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
Register for this course and see more details by visiting:
OpenCourser.com/course/teozu1/master
14 deals to help you save
We found 14 deals and offers 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 December 3
Cyber Monday
Develop career-changing skills with these steeply discounted courses.
Up to
85%
off
BFCMSALE24
Use code at checkout.
Only 17 hours left!
Black Friday
Develop career-changing skills with these steeply discounted courses.
Up to
85%
off
BFCMSALE24
Use code at checkout.
Valid until December 1
For new customers
Save when you purchase top courses. For new customers only.
Special Offer
UDEAFNULP2024
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off
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
- 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
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
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
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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.
Practice writing SQL queries
Show steps
Master SQL, a fundamental skill for accessing and manipulating data.
Browse courses on
SQL
Show steps
Show steps
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
Show steps
Connect with other developers and learn about industry trends.
Browse courses on
React
Show steps
Show steps
Show steps
- Find a virtual meetup or conference
- Register for the event
- Attend the event and participate in discussions
React Fundamentals Practice
Show steps
Strengthen your understanding of React concepts by revisiting the basics.
Browse courses on
React Components
Show steps
Show steps
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
Show steps
Gain proficiency in the core building blocks of React applications.
Browse courses on
React Components
Show steps
Show steps
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
Show steps
Gain hands-on experience and learn from experts in the field.
Browse courses on
React
Show steps
Show steps
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
Show steps
Expand your understanding of state management in React applications.
Browse courses on
Redux
Show steps
Show steps
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
Show steps
Collaborate with peers to enhance your learning experience.
Show steps
Show steps
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
Show steps
Solidify React, REST APIs, and UI/UX skills by developing a real-world web application.
Show steps
Show steps
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
Show steps
Create a practical project to showcase your skills and deepen your understanding.
Show steps
Show steps
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
Show steps
Reflect on and reinforce your understanding of Next.js by sharing your knowledge.
Browse courses on
Next.js
Show steps
Show steps
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
Show steps
Demonstrate your ability to build and deploy a complete web application using Next.js.
Browse courses on
Next.js
Show steps
Show steps
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
Show steps
Apply your skills to build a complete web application.
Show steps
Show steps
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:
For more career information including salaries, visit:
OpenCourser.com/course/teozu1/master
Reading list
We haven't picked any books for this reading list yet.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/teozu1/master
Share
Similar courses
Here are nine courses similar to
Master Next.js 14 - Full-Stack Complete Guide.
React 18 with Next.js Playbook
OpenCourser.com/course/2eb7jq/react
React 18 with Next.js Playbook
Most relevant
Next.js 13 Fundamentals
OpenCourser.com/course/c30lrx/next
Next.js 13 Fundamentals
Most relevant
Complete React, Next.js & TypeScript Projects Course 2024
OpenCourser.com/course/knnfwm/complete
Complete React, Next.js & TypeScript Projects Course 2024
Most relevant
Next.js 14 & React - The Complete Guide
OpenCourser.com/course/kyoqxj/next
Next.js 14 & React - The Complete Guide
Most relevant
Building Server-side Rendered React Apps for Beginners
OpenCourser.com/course/48a0r2/building
Building Server-side Rendered React Apps for Beginners
Most relevant
Full Stack Markdown App With Next.js
OpenCourser.com/course/k87df5/full
Full Stack Markdown App With Next.js
Most relevant
Node with React: Fullstack Web Development
OpenCourser.com/course/ptl3ie/node
Node with React: Fullstack Web Development
Most relevant
Advanced React & Storybook: From Components Library to CI/CD
OpenCourser.com/course/p6tb8f/advanced
Advanced React & Storybook: From Components Library to...
The Complete React Native + Hooks Course
OpenCourser.com/course/fxbe1n/the
The Complete React Native + Hooks Course
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
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