If you’re looking to learn all the core techniques of Next.js to get you up and running in building a fully-fledged web application then this Next.js class is for you!
With big changes having been introduced in NextJS 13, first, learn the core techniques used in Next.js before learning about the new features that have been added.
In this class, we’ll be building a fully-featured blog. You’ll be using the fundamental features of Next.js that have made it one of the most popular web development frameworks in the world and work with all the brand-new features that have been introduced in NextJS 13.
The Next.js techniques used to build the class project will cover a wide range of concepts and approaches to ensure you’ll go away with the confidence to be able to use Next.js in future projects of your own. Everything in this course will be fundamental in mastering the important aspects of building a NextJS application.
I’ll explain how I use Next.js to build functional and highly-performant applications that will enhance the all-around user experience.
This class will cover:
-
Setting up a Next.js project
-
App structure and organising layouts
-
Components and JSX
-
Static-site generation
-
Images and fonts
-
Routing
-
Accessing data
-
Adding styles / CSS modules
-
Error handling
-
Deployment
-
Changes that have been introduced in Next.js 13
You’ll be shown how to publish your work (for free!) using Vercel so I can give you some feedback and so other students can see your amazing work!
Even if you’re new to NextJS, you’ll find these simple and effective techniques easy to use and be able to apply everything you learn to your own future web projects.
-
1
Course IntroductionWelcome to "Next.js: The Complete Beginner’s Guide"! Find out what you Next.js skills you will learn in this course and what we will build together so you can learn all the fundamentals of NextJS
-
2
What is Next.js and why use it?
A quick overview to get an understanding of what Next.js actually is and to help learn the benefits of using it
-
3
Project Introduction
You'll get an understanding of the blog application we'll be building in this course
-
4
Setting up your Next.js project
Learn how to set up a Next.js 13 application and get it running in your browser. I'll also show you some code editor extensions that I use to save some time when coding.
-
5
App Structure and Layout: Part 1
Learn about the different parts of the app and folder structure when a Next.js 13 app is installed.
-
6
App Structure and Layout: Part 2
Delve into the code and take the first steps into building and laying out the base structure of your application.
-
7
App Structure and Layout: Part 3
Understand what route groups are and how they can be useful. Then lets have a quick summary of all that was learnt about the app structure and how layouts work.
-
8
Images and Fonts
You'll learn how Next.js has introduced efficient and optimised ways to include images and fonts to your application
-
9
Routing
Next.js 13 has a new way of routing and navigation. After this lesson, you'll have learnt how to navigate efficiently between the pages in your application, including dynamic blog post pages
-
10
Data and Dynamic Pages: Part 1
Understand how Next.js 13 simplifies how we can access an external API for data and create dynamic pages
-
11
Data and Dynamic Pages: Part 2
Learn how we can work with importing dynamic images in an optimised way and how to let the user know that the content is loading
-
12
Handling Errors
By the end of this lesson, you'll know how to gracefully deal with 404 pages and isolate errors to their specific components without affecting the whole application
-
13
Adding Styles
Learn the different ways we can add styles to our Next.js application and begin working with CSS modules
-
14
Testing
Learn a couple of ways how you can best test your Next.js application to improve performance, SEO and accessibility
-
15
Deploying Your Work
Use Vercel and the CLI to easily deploy your blog application to the internet for all to see!
Lessons:
