The Beginner's Guide to Next.js

👋 Welcome

Welcome to The Beginner's Guide to Next.js egghead.io workshop! 🚀

In this workshop we will discover the essential features of Next.js. Every exercise is an isolated mini project that focuses only on a specific feature, so you don't have anything extra to worry about. By the end of this workshop, you'll learn how to create Next.js projects, use Next.js's data fetching methods, create your own API handlers, use UI frameworks, and deploy your apps on Vercel.

I hope you like this workshop, and have fun learning ❤️

🤠 Instructor

My name is Lazar Nikolov and I'm a full stack developer from North Macedonia 🇲🇰, based in Canada 🇨🇦!

My first interaction with programming was back in 2011, while I was still in high school. I was learning HTML and CSS on my own, sometimes during the classes (don't tell my teachers 🤫). Throughout my career I've been developing mobile apps, TV apps, desktop apps, but I've found my sweet spot as a Full-stack Engineer working with the React ecosystem.

I'm a super friendly guy, so if you have any questions, or just want to talk to me, the best place to reach me is on Twitter at @NikolovLazar.

🎯 Goal

After finishing this workshop, you'll become comfortable using Next.js to build your web apps and deploy them on Vercel.

🚅 Skills

You'll learn about web page rendering like SSR, SSG, which as a skill is completely transferrable in other frameworks and technologies.

If you haven't worked with TypeScript before, that's another skill that you'll learn and also apply in other frameworks and technologies.

We'll also going learn how to architecture our front-end using pages, layouts, and components, which is a skill you can apply in every front-end project in your future.

🚧 Prerequisites

Before starting this workshop, you should be comfortable working with React, TypeScript, and understand basic Web Dev concepts.

Here are some egghead.io courses that can bring you up to speed:

• The Beginner's Guide to React by Kent C. Dodds
• React Context for State Management by Dave Ceddia
• Shareable Custom Hooks in React by Joe Previte
• Up and Running with TypeScript by John Lindquist
• Use Types Effectively in TypeScript by Ari Picker

💽 Workshop Setup

Make sure you have Node.js, Visual Studio Code installed on your machine.

Each exercise is its own Next.js project and lives inside the /exercises folder. To get started, run npm install at the root (this installs all of the dependencies), cd into exercises and open the execise's README file (exercises/exercise-01--create-a-new-next-js-type-script-project/README.md), which contains the instructions. Each exercise can be run by running npm run dev at the root of the exercise.

🔢 Exercises list

• Exercise 01 - Create a new Next.js TypeScript project
• Exercise 02 - Create and navigate between pages
• Exercise 03 - Create Dynamic Routes
• Exercise 04 - Serve static assets
• Exercise 05 - Use next/image for Image Optimization
• Exercise 06 - Provide page-specific metadata
• Exercise 07 - Override the App component
• Exercise 08 - Override the Document
• Exercise 09 - Create custom style
• Exercise 10 - Create custom Layouts
• Exercise 11 - Use UI frameworks like Chakra UI
• Exercise 12 - Use the Static Generation method
• Exercise 13 - Use the Server-side Rendering method
• Exercise 14 - Create and use API Routes
• Exercise 15 - Deploy your Next.js app on Vercel

❤️ Contributors

PRs are always welcome. If you find a typo, or have any ideas on how to improve the content, feel free to submit a PR. Let's make learning Next.js better for everyone!

🍩 Feedback form

Your feedback is always welcome 🙏. It's not just useful for me. Your feedback will help me make the content better for every other developer friend in future. Visit this form if you feel like providing a feedback.

Thank you ❤️