Next.js Image Gallery

With Tailwind CSS, TypeScript & Zod

In this series, we’ll build a searchable Next.js Image Gallery with the Next.js App Directory, Tailwind CSS, TypeScript and Zod.

Lesson Help

If you get stuck on any lesson in the series, (1) navigate to the course branch for your current lesson and (2) view or (3) download the code for more help.

Prerequisites

In this series, I’ll assume you know the fundamentals of Next.js, TypeScript, and Tailwind CSS. If you need help, see the Net Ninja’s introductory series on each of those topics.

💻 You will need:

• Node.js (npm / npx)
• Next.js
• Pexels API Key

🚀 Create .env.local file

Create a .env.local file to store your API key. Example below:

PEXELS_API_KEY=your-API-key-value

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

📚 References

• 🔗 Next.js Official Site
• 🔗 Pexels API
• 🔗 TailwindCSS Official Site
• 🔗 TypeScript Official Site
• 🔗 Zod Official Site
• 🔗 Plaiceholder
• 🔗 Envalid

---

Author Links

👋 Hello, I'm Dave Gray.

👉 My Courses

✅ Check out my YouTube Channel with hundreds of tutorials.

🚩 Subscribe to my channel

☕ Buy Me A Coffee

🚀 Follow Me:

• 🔗 Twitter
• 🔗 LinkedIn
• 🔗 Blog

---

🎓 Academic Honesty

DO NOT COPY FOR AN ASSIGNMENT - Avoid plagiarism and adhere to the spirit of this Academic Honesty Policy.