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
    Why to use Next.js and what we will cover.
  3. 2Project Setup
    Install Next.js and TailwindCSS
  4. 3Link and Router
    How to use Link and Router
  5. 4App and Document
    How to control HTML of everypage.
  6. Styling with TailwindCSS

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

  12. 9Client Side Form Validation
    How to use React Hook Form
  13. 10ConvertKit API details
    Valildating ConvertKit API with Postman
  14. 11Subscribe API endpoint
    Creating API route, response helpers
  15. 12Subscribe API - Part 2
    Send request to ConvertKit
  16. 13React Query - Mutation
    Manage isLoading, isError and isSuccess
  17. Next Steps

  18. 14Final Words
    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.