Next.js Tutorials Archives

Build a Modern Booking UI with Next.js and HeroUI

Learn how to build a modern booking UI using Next.js, TypeScript, and HeroUI with calendars, modals, and clean UX.

Follow this step-by-step guide to build a responsive booking system with Next.js, TypeScript and HeroUI Calendar and Modal. Learn.

Learn how to create a responsive pricing page in Next.js using HeroUI cards, TypeScript, and a toggle for monthly and yearly plans.

Create a responsive collapsible sidebar with HeroUI and Next.js (TypeScript). Accordion, dynamic routes and active-link highlighting

Learn to build a fast, interactive Slack-style Notification Center using Next.js, HeroUI Tabs, Badges, and Toasts with TypeScript.

Learn how to add multi-language support to a Next.js app with HeroUI and next-intl. Build dynamic, localized user experiences easily.

Learn to build a modern newsletter signup modal in Next.js using HeroUI. Add auto-popup and local storage control easily.

Build a sleek drag-and-drop file upload UI with Next.js, Dropzone, and HeroUI. Create a responsive, stylish, and premium upload experience.

Learn how to build a fast, professional marketing homepage with Next.js and HeroUI components to boost trust, features, and conversions.

Build an accessible, validated contact form in Next.js with @heroui/react. Learn inputs, textarea, buttons, and toasts for UX that shines.