CoderVlogger

Add Header and Footer with Tailwindcss / Building Website with Next.js with Coursor.ai

Kanan Rahimov -

Add Header, Footer, and Content Area UI Elements to the Website

[ 3 videos and homework | Duration: 35-40 mins | | Preview demo ]

As part of the step-by-step tutorial for creating a simple website with Next.js, we will extend the website with basic UI features: a header with a Navbar, a content area, and a footer with links. We will build these UI components using TailwindCSS, TailwindUI, and Next.js.

ℹ️
This tutorial is part of the full course series on building a web app using Next.js and Cursor.ai (for beginners).

Full course content includes:

1. Start development with Next.js, React, and Tailwindcss using Cursor.ai
2. Create an app using Next.js, React, and Tailwindcss
3. Add bare minimum UI elements to the website: Header, Footer, and Content Area (this post)
4. Introduce reusable React components
5. Add extra pages and connect them using the Next.js Link
6. Publish the website using Vercel

Join as a member to get notified (free) and access all course materials (part of paid membership).

This article includes:

  1. Primary video tutorial (video 1) explaining how to add header, footer, and content area to a simple Next.js website using Tailwindcss.
  2. An extra video (video 2) showcasing how to refactor the header using Cursor AI (prompts).
  3. Another extra video tutorial (video 3) showcases how to refactor the footer area using Cursor AI (prompts).
  4. A preview website to see the final result.
  5. Follow-up learning topics.
  6. 1 Homework (for paid members).
  7. Complete source code (paid members).

Tutorial 1: Header, Footer, and Content Area with TailwindCSS

Part 1: Adding header, footer, and content area to a simple Next.js website with Tailwindcss

Includes:

  • Mention structure and which file should contain the code
  • Why do we inline the code (why not components, for now)
  • Major differences in versions

Result:

Full screen view with Tailwindcss and Next.js

Preview website

Add a NavBar (navigation menu) to a Next.js app

This sub-section covers:

  1. Implement a header with a navbar, a footer, and a simple content area (with raw HTML for now)
  2. Extend our solution by adding Tailwindcss and TailwindUI
  3. Use Navbar from TailwindUI
    1. Install dependencies:
      1. npm install @heroicons/react
      2. npm install @headlessui/react
  4. Replace <img> with next/image
  5. 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:

Tailwind CSS Navbars - Official Tailwind UI Components
Responsive navbar examples for Tailwind CSS, designed and built by the creators of the framework.
Official Tailwind UI Components

Add content area

This sub-section covers:

  1. Using Tailwindcss flex component
  2. Using alignment and size Tailwindcss classes

This sub-section covers:

  1. Add a two-sided and multi-column footer to the website
  2. Adjust links in the header and footer
  3. Add a simple content area placeholder

Tutorial 2: Refactor Tailwindcss Header UI using Cursor AI (Extra 1)

Follow-ups to improve your skills after this section

  • It is recommended to learn more about the following Tailwindcss elements:

🔐 Source Code, Homework Excercise, and Solution

This tutorial includes homework, a solution for the homework, and complete source code.

All CoderVlogger.com paid members are eligible to access all course materials with extra steps.

Additionally, you can buy complete course materials and source code with a one-time payment (coming soon; subscribe for announcement).