{"id":13823347,"url":"https://github.com/replicate/getting-started-nextjs","last_synced_at":"2025-05-16T07:03:59.837Z","repository":{"id":60282536,"uuid":"523839766","full_name":"replicate/getting-started-nextjs","owner":"replicate","description":"A Next.js starter app using Replicate","archived":false,"fork":false,"pushed_at":"2025-02-14T17:12:45.000Z","size":253,"stargazers_count":243,"open_issues_count":9,"forks_count":123,"subscribers_count":26,"default_branch":"main","last_synced_at":"2025-05-16T01:34:25.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://replicate.com/docs/get-started/nextjs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/replicate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2022-08-11T19:11:00.000Z","updated_at":"2025-05-07T09:29:09.000Z","dependencies_parsed_at":"2023-11-07T00:02:04.040Z","dependency_job_id":"d9dffa83-3766-41e0-99cb-9007b03fbe28","html_url":"https://github.com/replicate/getting-started-nextjs","commit_stats":{"total_commits":55,"total_committers":10,"mean_commits":5.5,"dds":0.5272727272727273,"last_synced_commit":"e840c5c76773c23d38193e5d052c7e0cba751187"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replicate%2Fgetting-started-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replicate%2Fgetting-started-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replicate%2Fgetting-started-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replicate%2Fgetting-started-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/replicate","download_url":"https://codeload.github.com/replicate/getting-started-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485053,"owners_count":22078767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-08-04T09:00:31.326Z","updated_at":"2025-05-16T07:03:59.817Z","avatar_url":"https://github.com/replicate.png","language":"JavaScript","funding_links":[],"categories":["Code Samples"],"sub_categories":[],"readme":"## Getting started with Next.js and Replicate\n\n\u003cimg width=\"100%\" alt=\"iguana\" src=\"https://github.com/replicate/cog/assets/2289/1d8d005c-e4a1-4a9d-bd4c-b573fc121b37\"\u003e\n\nThis is a [Next.js](https://nextjs.org/) template project that's preconfigured to work with Replicate's API.\n\nIt uses Next's newer [App Router](https://nextjs.org/docs/app) and [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components).\n\nYou can use this as a quick jumping-off point to build a web app using Replicate's API, or you can recreate this codebase from scratch by following the guide at [replicate.com/docs/get-started/nextjs](https://replicate.com/docs/get-started/nextjs)\n\n## Noteworthy files\n\n- [app/page.js](app/page.js) - React frontend that renders the home page in the browser\n- [app/api/predictions/route.js](app/api/predictions/route.js) - API endpoint that calls Replicate's API to create a prediction\n- [app/api/predictions/[id]/route.js](app/api/predictions/[id]/route.js) - API endpoint that calls Replicate's API to get the prediction result\n- [app/api/webhooks/route.js](app/api/webhooks/route.js) - API endpoint that receives and validates webhooks from Replicate\n\n## Running the app\n\nInstall dependencies:\n\n```console\nnpm install\n```\n\nCreate a git-ignored text file for storing secrets like your API token:\n\n```\ncp .env.example .env.local\n```\n\nAdd your [Replicate API token](https://replicate.com/account/api-tokens) to `.env.local`:\n\n```\nREPLICATE_API_TOKEN=\u003cyour-token-here\u003e\n```\n\nRun the development server:\n\n```console\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser.\n\nFor detailed instructions on how to create and use this template, see [replicate.com/docs/get-started/nextjs](https://replicate.com/docs/get-started/nextjs)\n\n\n## Webhooks\n\nWebhooks provide real-time updates about your predictions. When you create a prediction or training, specify a URL that you control and Replicate will send HTTP POST requests to that URL when the prediction is created, updated, and completed.\n\nThis app is set up to optionally request, receive, and validate webhooks.\n\n### How webhooks work\n\n1. You specify a webhook URL when creating a prediction in [app/api/predictions/[id]/route.js](app/api/predictions/[id]/route.js)\n1. Replicate sends POST requests to the handler in [app/api/webhooks/route.js](app/api/webhooks/route.js) as the prediction is updated.\n\n### Requesting and receiving webhooks\n\nTo test webhooks in development, you'll need to create a secure tunnel to your local machine, so Replicate can send POST requests to it. Follow these steps:\n\n1. [Download and set up `ngrok`](https://replicate.com/docs/webhooks#testing-your-webhook-code), an open-source tool that creates a secure tunnel to your local machine so you can receive webhooks.\n1. Run ngrok to create a publicly accessible URL to your local machine: `ngrok http 3000`\n1. Copy the resulting ngrok.app URL and paste it into `.env.local`, like this: `NGROK_HOST=\"https://020228d056d0.ngrok.app\"`.\n1. Leave ngrok running.\n1. In a separate terminal window, run the app with `npm run dev`\n1. Open [localhost:3000](http://localhost:3000) in your browser and enter a prompt to generate an image.\n1. Go to [replicate.com/webhooks](https://replicate.com/webhooks) to see your prediction status.\n\n### Validating incoming webhooks\n\nFollow these steps to set up your development environment to validate incoming webhooks:\n\n1. Get your signing secret by running:\n    ```\n    curl -s -X GET -H \"Authorization: Bearer $REPLICATE_API_TOKEN\" https://api.replicate.com/v1/webhooks/default/secret\n    ```\n1. Add this secret to `.env.local`, like this: `REPLICATE_WEBHOOK_SIGNING_SECRET=whsec_...`\n1. Now when you run a prediction, the webhook handler in [app/api/webhooks/route.js](app/api/webhooks/route.js) will verify the webhook.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freplicate%2Fgetting-started-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freplicate%2Fgetting-started-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freplicate%2Fgetting-started-nextjs/lists"}