{"id":43974933,"url":"https://github.com/usemarble/nextjs-example","last_synced_at":"2026-02-07T08:07:33.607Z","repository":{"id":276795414,"uuid":"930324318","full_name":"usemarble/nextjs-example","owner":"usemarble","description":"Next.js integration with the marble api","archived":false,"fork":false,"pushed_at":"2026-01-10T02:46:28.000Z","size":338,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-11T00:39:11.302Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://postcard-canvas.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usemarble.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-10T13:01:58.000Z","updated_at":"2026-01-10T02:46:32.000Z","dependencies_parsed_at":"2025-04-04T23:30:37.805Z","dependency_job_id":null,"html_url":"https://github.com/usemarble/nextjs-example","commit_stats":null,"previous_names":["taqh/nextjs-example","usemarble/nextjs-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/usemarble/nextjs-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usemarble%2Fnextjs-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usemarble%2Fnextjs-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usemarble%2Fnextjs-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usemarble%2Fnextjs-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usemarble","download_url":"https://codeload.github.com/usemarble/nextjs-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usemarble%2Fnextjs-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29189675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T07:37:03.739Z","status":"ssl_error","status_checked_at":"2026-02-07T07:37:03.029Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-07T08:07:33.101Z","updated_at":"2026-02-07T08:07:33.591Z","avatar_url":"https://github.com/usemarble.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js + MarbleCMS Template\n\nA production-ready Next.js template for integrating [MarbleCMS](https://marblecms.com), a headless CMS built for writers and developers. This template demonstrates how to fetch content from Marble's API, build static pages, and handle webhook revalidation.\n\n## Features\n\n- **Static Site Generation** - Pre-rendered pages at build time for optimal performance\n- **Dynamic Routes** - Automatic page generation for posts and tags\n- **Webhook Integration** - Automatic cache revalidation when content updates in Marble\n- **TypeScript** - Full type safety with MarbleCMS API types\n- **Modern UI** - Built with Tailwind CSS and Shadcn/ui components\n- **SEO Optimized** - Dynamic metadata generation for posts\n\n## Prerequisites\n\nBefore you begin, ensure you have:\n\n- Node.js 18+ installed\n- A [MarbleCMS](https://marblecms.com) account and workspace\n- Your Marble API key (found in your Marble dashboard under Settings \u003e General)\n\n## Getting Started\n\n### 1. Clone the repository\n\n```bash\ngit clone https://github.com/usemarble/nextjs-example.git\ncd nextjs-example\n```\n\n### 2. Install dependencies\n\n```bash\npnpm install\n# or\nnpm install\n# or\nyarn install\n```\n\n### 3. Set up environment variables\n\nCreate a `.env.local` file in the root directory:\n\n```env\nMARBLE_API_KEY=your_api_key_here\nMARBLE_WEBHOOK_SECRET=your_webhook_secret_here\n```\n\n**Important:** Never expose your `MARBLE_API_KEY` in client-side code. These environment variables should only be accessed on the server during the build process.\n\n### 4. Run the development server\n\n```bash\npnpm dev\n# or\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to see your site.\n\n## Project Structure\n\n```text\nsrc/\n├── app/\n│   ├── (site)/              # Main site pages\n│   │   ├── page.tsx         # Homepage listing all posts\n│   │   ├── post/\n│   │   │   └── [slug]/      # Dynamic post pages\n│   │   └── tag/\n│   │       └── [slug]/      # Dynamic tag pages\n│   └── api/\n│       └── revalidate/      # Webhook endpoint for cache revalidation\n├── components/              # Reusable UI components\n│   ├── post-card.tsx        # Post preview card\n│   ├── prose.tsx            # Typography component for post content\n│   └── ui/                  # Shadcn/ui components\n├── lib/\n│   ├── marble/\n│   │   ├── client.ts        # Marble SDK client initialization\n│   │   ├── queries.ts       # API functions using @usemarble/sdk\n│   │   └── webhook.ts       # Webhook signature verification \u0026 handling\n│   └── site.ts              # Site configuration\n└── types/\n    └── webhook.ts           # Webhook event types\n```\n\n### Key Files Explained\n\n- **`src/lib/marble/queries.ts`** - Contains functions to fetch posts, tags, categories, and authors using the [`@usemarble/sdk`](https://www.npmjs.com/package/@usemarble/sdk) package.\n- **`src/lib/marble/webhook.ts`** - Handles webhook signature verification and triggers Next.js cache revalidation when content updates.\n- **`src/lib/marble/client.ts`** - Marble SDK client initialization\n- **`src/app/api/revalidate/route.ts`** - API route endpoint that receives webhooks from Marble and revalidates the cache.\n- **`src/app/(site)/post/[slug]/page.tsx`** - Dynamic route that generates static pages for each post using `generateStaticParams()`.\n\n## Configuration\n\n### Environment Variables\n\n| Variable                | Description                             | Required           |\n| ----------------------- | --------------------------------------- | ------------------ |\n| `MARBLE_API_KEY`        | Your Marble API key                     | Yes                |\n| `MARBLE_WEBHOOK_SECRET` | Secret for verifying webhook signatures | Yes (for webhooks) |\n\n### Next.js Configuration\n\nThe `next.config.ts` file includes image domain configuration for Marble's CDN:\n\n```typescript\nimages: {\n  remotePatterns: [\n    {\n      protocol: 'https',\n      hostname: 'images.marblecms.com',\n    },\n  ],\n}\n```\n\n## Setting Up Webhooks\n\nTo enable automatic cache revalidation when content updates:\n\n1. Go to your Marble dashboard → Webhooks\n2. Create a new webhook with your deployment URL: `https://yourdomain.com/api/revalidate`\n3. Select events: `post.published`, `post.updated`, `post.deleted`\n4. Copy the webhook secret and add it to your `.env.local` as `MARBLE_WEBHOOK_SECRET`\n\nThe webhook handler will automatically revalidate:\n\n- The homepage (`/`)\n- Individual post pages (`/post/[slug]`)\n- The `posts` cache tag\n\n## Deployment\n\n### Deploy to Vercel\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/usemarble/nextjs-example.git)\n\n1. Click the button above or import this repository into Vercel\n2. Add your environment variables in Vercel's project settings\n3. Deploy\n\nAfter deployment, update your Marble webhook URL to point to your Vercel deployment.\n\n### Other Platforms\n\nThis template works with any hosting platform that supports Next.js:\n\n- **Netlify** - Follow the [Next.js guide](https://docs.netlify.com/build/frameworks/framework-setup-guides/nextjs/overview/) for seamless deployment\n- **Cloudflare** - Deploy with [Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/nextjs/) support for Next.js\n\n## Learn More\n\n- [MarbleCMS Documentation](https://docs.marblecms.com)\n- [Next.js Documentation](https://nextjs.org/docs)\n- [MarbleCMS API Reference](https://docs.marblecms.com/api/introduction)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusemarble%2Fnextjs-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusemarble%2Fnextjs-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusemarble%2Fnextjs-example/lists"}