Build a Random Jokes Generator App in Next.js with API & Tailwind CSS

Build a Random Jokes Generator App in Next.js with API & Tailwind CSS

T
Thapa Technical
Jun 29, 2025

In this fun and beginner-friendly tutorial, we’ll build a Random Jokes Generator App using Next.js 14, fetch real-time jokes from a public API, and style it beautifully with Tailwind CSS. Learn how to use useEffect, useState, and conditional rendering to show/hide the punchline and fetch new jokes. This is a perfect mini project for React/Next.js learners!

💸 Get Source Code for Free! Grab Now - https://www.thapatechnical.com/2025/06/nextjs-series-in-2025.html

💸 Get All My YouTube Videos' Source Code for just ₹199! Grab Now - https://thapatechnical.shop/source-code

------------------------------------------------------------------------
🚀 Boost Your Skills with these Pre-Requisite Videos:

🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE
🔗 Best CSS Course - https://youtu.be/MSICFljRcb4
🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8
🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8

------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html

------------------------------------------------------------------------
✌️ Join Us!

🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join
📷 Connect on Instagram: https://www.instagram.com/thapatechnical
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6

------------------------------------------------------------------------

⌛TIMELINE⏳
0:00 Random Jokes Generator App in Next.js Overview
2:05 How the Jokes API Looks Like
3:15 Project Folder Structure
4:20 Creating a Client Component in Next.js
5:00 Using useEffect to Call API
6:10 Fetch API to Get Jokes
8:06 Console Output of API Data
8:35 Managing State to Store Data
9:25 Showing Jokes in JSX UI
10:40 Functionality to Show/Hide Punchline
14:35 Next Button to Fetch New Jokes
16:50 Adding Tailwind CSS for Styling
18:52 Final Thoughts – Let’s Help Students Grow