my-app777's Introduction

`next` recipe

The next recipe showcases one of the most powerful ways to implement Puck using to provide an authoring tool for any route in your Next app.

Demonstrates

Next.js 13 App Router implementation
JSON database implementation with HTTP API
Catch-all routes to use puck for any route on the platform
Incremental static regeneration (ISR) for all Puck pages

Usage

Run the generator and enter next when prompted

npx create-puck-app my-app

Start the server

yarn dev

Navigate to the homepage at https://localhost:3000. To edit the homepage, access the Puck editor at https://localhost:3000/edit.

You can do this for any route on the application, even if the page doesn't exist. For example, visit https://localhost:3000/hello/world and you'll receive a 404. You can author and publish a page by visiting https://localhost:3000/hello/world/edit. After publishing, go back to the original URL to see your page.

Using this recipe

To adopt this recipe you will need to:

IMPORTANT Add authentication to /edit routes. This can be done by modifying the example API routes in /app/puck/api/route.ts and server component in /app/puck/[...puckPath]/page.tsx. If you don't do this, Puck will be completely public.
Integrate your database into the API calls in /app/puck/api/route.ts
Implement a custom puck configuration in puck.config.tsx

By default, this recipe will generate static pages by setting dynamic to force-static in the /app/[...puckPath]/page.tsx. This will strip headers and cookies. If you need dynamic pages, you can delete this.