Ihatetomatoes

Next.js 101 - Free Online Course

Learn how to build a simple landing page with Next.js

Next.js 101 - Free Online Course

What you'll learn

  • How to build this landing page with Next.js
  • How to create API endpoint and integrate with ConvertKit API
  • How to use React Hook Form and TailwindCSS
Start Learning →

  1. Introduction and Setup

  2. 1Introduction 05:24
    Why to use Next.js and what we will cover.
  3. 2Project Setup 05:40
    Install Next.js and TailwindCSS
  4. 3Link and Router 10:02
    How to use Link and Router
  5. 4App and Document 04:05
    How to control HTML of everypage.

  6. Styling with TailwindCSS

  7. 5TailwindCSS Introduction 9:10
    The basic workflow with TailwindCSS
  8. 6Layout and Hero Components 15:00
    Create CSS layout using TailwindCSS
  9. 7Customising Colors in TailwindCSS 05:57
    How to create your own color palette
  10. 8Subscribe Form Component 12:56
    Conditional classes with classnames

  11. Form Submission

  12. 9Client Side Form Validation 08:35
    How to use React Hook Form
  13. 10ConvertKit API details 05:48
    Valildating ConvertKit API with Postman
  14. 11Subscribe API endpoint 06:49
    Creating API route, response helpers
  15. 12Subscribe API - Part 2 09:35
    Send request to ConvertKit
  16. 13React Query - Mutation 14:07
    Manage isLoading, isError and isSuccess

  17. Deployment

  18. 14Deploy Next.js App to Vercel 13:10
    Learn how to deploy your Next.js app to Vercel.

  19. Next Steps

  20. 15Final Words 2:24
    Next steps and other learning resources.

Petr Tichy
Front-end Developer

Petr is a passionate front-end developer who likes to build cool products and teach along the way.