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 ❤️
My name is Lazar Nikolov and I'm a developer / designer from Skopje, North Macedonia 🇲🇰! I work at CodeChem, I'm a core member at Chakra UI, and I'm also an egghead instructor.
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.
After finishing this workshop, you'll become comfortable using Next.js to build your web apps and deploy them on Vercel.
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.
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
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.
Exercise 01- Create a new Next.js TypeScript projectExercise 02- Create and navigate between pagesExercise 03- Create Dynamic RoutesExercise 04- Serve static assetsExercise 05- Usenext/imagefor Image OptimizationExercise 06- Provide page-specific metadataExercise 07- Override the App componentExercise 08- Override the DocumentExercise 09- Create custom styleExercise 10- Create custom LayoutsExercise 11- Use UI frameworks like Chakra UIExercise 12- Use the Static Generation methodExercise 13- Use the Server-side Rendering methodExercise 14- Create and use API RoutesExercise 15- Deploy your Next.js app on Vercel
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!
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 ❤️