Learn Webiny Next.js App

A Next.js starter application for learning how to integrate Webiny Headless CMS with Static Site Generation.

About This Project

This is the companion repository for the Learn Webiny - Headless CMS Course.

By following Lesson 8: Learn Webiny Next.js App, you'll learn how to:

• Connect a Next.js app to Webiny Headless CMS
• Create API keys with proper permissions
• Fetch and display content using the Read API
• Implement Static Site Generation (SSG)
• Handle errors gracefully with TypeScript

Prerequisites

• Node.js 18 or higher
• npm, yarn, or pnpm
• A Webiny project with published products (from Lessons 1-7)
• Basic understanding of React and Next.js

Getting Started

1. Clone the Repository

git clone https://github.com/webiny/learn-webiny-nextjs-app.git
cd learn-webiny-nextjs-app

2. Install Dependencies

npm install

3. Follow the Lesson

This repository contains the starter code only. To complete the application, follow the step-by-step tutorial:

👉 Lesson 8: Learn Webiny Next.js App

The lesson will guide you through:

• Finding your Webiny API URL
• Creating an API key with proper permissions
• Setting up environment variables
• Creating TypeScript types (lib/types.ts)
• Building the API client (lib/webiny.ts)
• Fetching and displaying products (app/page.tsx)
• Building for production with SSG

4. Run Development Server

npm run dev

Open http://localhost:3000 to see the app.

Project Structure

learn-webiny-nextjs-app/
├── app/              # Next.js App Router
│   ├── layout.tsx    # Root layout
│   ├── page.tsx      # Homepage (you'll modify this)
│   └── globals.css   # Tailwind styles
├── lib/              # Your code goes here (create these files):
│   ├── types.ts      # TypeScript interfaces (you'll create)
│   └── webiny.ts     # API client functions (you'll create)
├── public/           # Static assets
├── .env.local        # API credentials (you'll create - not in git)
└── package.json      # Dependencies

Environment Variables

Copy .env.local.example to .env.local and fill in your Webiny API details:

cp .env.local.example .env.local

Then edit .env.local with your actual API URL and token (from Lesson 8).

Need Help?

• 📚 Full Tutorial: Lesson 8
• ✅ Completed Example: Check the completed branch to see the full solution
• 📖 Webiny Docs: webiny.com/docs
• 💬 Community: Webiny Community Slack

What's Next?

After completing Lesson 8, continue with:

• Lesson 9: Writing Data (Create a contact form with mutations)
• Lesson 10: Lifecycle Events (Email validation)
• Lesson 11: Customize Data Lists
• Lesson 12: Create Custom APIs

Tech Stack

• Next.js 16.1.6 (App Router)
• React 19.2.3
• TypeScript 5
• Tailwind CSS 4
• Webiny Headless CMS

License

MIT

---

Built with ❤️ for the Webiny learning community