Zero to One: How to Build a Web App using Next.js, TailwindCSS, and Cursor AI (for beginners)
[ 20 video tutorials & homework | 6 hours | Preview Website ]
How to build a website using Next.js, Tailwindcss, and Cursor.ai?
Overview
This tutorial and attached course materials are created for people with minimal or zero programming knowledge. The course contains focused tutorials so beginners can quickly start and get noticeable initial results.
The primary goal is that beginners can start coding fast and then cover the foundational knowledge as follow-ups. That's why every step will cover the reference materials for the follow-up study.
Details
Goal:
Learn how to build a simple app using Next.js, Tailwindcss, and TypeScript.
Category:
Hands-on tutorial to build an end-to-end application.
Tech stack:
Next.js, App Router, TypeScript.
For whom:
Beginners (newbie programmers with zero or minimal knowledge).
Includes
- 6 hours of video tutorials.
- Detailed information about each step with all links and follow-ups.
- Demo website with the final result for each lesson and homework.
- Each section includes a homework exercise with a solution video.
Content
This course covers the following topics:
- ⏳ Start development with Next.js, React, and Tailwindcss using Cursor.ai
- ⏳ Create an app using Next.js, React, and Tailwindcss
- ✅ Add bare minimum UI elements to the website: Header, Footer, and Content Area.
- ✅ Create Reusable React Components.
- ⏳ Add extra pages and connect them using the Next.js Link.
- ⏳ Publish the website using Vercel.
Would you prefer a full course structure? You can purchase the whole course (buy once and access forever) via the Teachable course page.
Start development with Next.js, React, and Tailwindcss using Cursor AI
➡ Preview of the final result
A quick introduction to the application-building process.
- Required libraries:
- Install Node.js and NVM: Node Version Manager
- NPM:
- NPM is installed with Node, but you can also use this link to learn more.
- (Alternative) Yarn: another package manager
- IDEs:
- Cursor: AI Code Editor
- or VS Code
- Terminals: Additionally, we will use Terminal to run commands. You can do this within IDE or install a separate terminal application:
- Most operational systems (Mac, Windows, Linux) have a default terminal. It is more than enough and will do the job.
- But there are also alternatives, such as:
- Accounts:
The video and tutorial will be published in the second week of November 2024.
Create an App Using Next.js, React, and Tailwindcss
➡ Preview of the final result
At this point, we will create the very first app using the setup prepared in the previous steps. The application is the starter template by Next.js. It has Tailwindcss enabled.
Content:
- Create an app using
npx create-next-app@latest
- Create an alternative app using nextjs-app-template
- Run application:
npm run dev
- Review the initial codebase:
layout.tsx
page.tsx
Follow-up references:
- TypeScript: JavaScript with syntax for types
- React.js: JavaScript library for web (and native) user interfaces
- Next.js: a framework for building web applications using React
- Tailwindcss: CSS framework for styling UI
The video and tutorial will be published in the second week of November 2024.
Add Header, Footer, and Content Area UI Elements to the Website
Let's add some features to our empty website. In this section, we will cover the following parts and extend the initial template with new UI elements:
- Website header and Navbar
- Content area
- Website footer
Add a NavBar (navigation menu) to a Next.js app
This sub-section covers:
- Implement a header with a navbar, a footer, and a simple content area (with raw HTML for now)
- Extend our solution by adding Tailwindcss and TailwindUI
- Use Navbar from TailwindUI
- Install dependencies:
npm install @heroicons/react
npm install @headlessui/react
- Install dependencies:
- Replace
<img>
withnext/image
- Add the external domain to your Next.js config (
next.config.ts
) to allow image optimization for images from Unsplash and TailwindUI.
Link to TailwindUI's Navbar:
Add a footer to a Next.js application
This sub-section covers:
- Add a two-sided and multi-column footer to the website
- Adjust links in the header and footer
- Add a simple content area placeholder
Follow-ups to improve your skills after this section
- It is recommended to learn more about the following Tailwindcss elements:
- Layout (Flex, Grid)
- Padding, Margin
- Alignment
👉🏾 Check the full tutorial here.
Create reusable React components
In this section, we will refactor our codebase and introduce reusable React components.
- Header
- Footer
- InfoBox
- PageHeader
- ThemeToggle (switch between dark and light mode)
👉🏾 Check the full tutorial here.
Add extra pages and connect them using Next.js Link
➡ Preview of the final result
Here, we will make our website look professional. We will create a company website with multiple pages. We will use all the previously created reusable components during this process and create a professional and final website application.
- Configuration with company details
- Reuse previously created components
The video and tutorial will be published in the third week of November 2024.
Publish the website using Vercel
➡ Preview of the final result
This is the final stage of our tutorial and hands-on course. At this stage, we will publish the website so it is accessible for public use and connect the deployed application with a publicly accessible domain.
- Connect GitHub with Vercel
- Vercel project for your app
This is the final stage of our tutorial and hands-on course. At this stage, we will publish the website so it is accessible for public use.
The video and tutorial will be published in the second week of November 2024.
This course includes extra materials:
- DaisyUI
- Enable Analytics for a Vercel project with Next.js
- Enable Google Analytics for a Next.js project
- Add sitemap, robots.txt, and enable Google Search Engine for your website
🔐 Course materials and source code
All CoderVlogger.com paid members are eligible to access the course with extra steps and source code. This includes:
- Extra video materials with in-depth explanation.
- Homework assignments with exercise details, solutions (with video explanation), and solution source code.
- Full final source code.
Additionally, you can buy complete course materials and source code with a one-time payment (coming soon; subscribe for announcement).