charlypoly / nextjs-with-defer

Next.js and Defer Demo

Explore how to schedule background tasks with Next.js and Defer

Documentation  ·  Blog  ·  Community  ·  Roadmap / RFCs

Features

Defer makes it easy to schedule and offload long-running tasks, without leaving your Next.js application with:

• Delayed Executions
• CRONs
• Workflows
• Advanced configuration: Retries, Concurrency or, Cancellation

This Next.js Demo comes with a CRON and 2 examples of Background Functions.

See how Defer fits perfectly with Next.js Server Actions, enabling you to trigger Background Functions from Client-Side Components.

Demo

You can view a fully working demo at demo-nextjs-with-defer.vercel.app.

Deploy to Vercel

1. First, click on the following button will fork this demo repository and deploy it on your Vercel account:

2. Once deployed on Vercel, go on the Defer Console to create an account.

3. Then, create a new Defer application by selecting your GitHub repository created from this template.

4. Finally, go to the Defer Vercel Integration page (Click "Add Integration") to connect your Vercel application with your Defer ones.

5. You are go to go! The tasks will now run on Defer, triggered from your Vercel demo application 🚀

Clone and run locally

1. Create a Next.js app using this template with the npx command:

   npx create-next-app -e https://github.com/defer-run/defer.demo/tree/master/nextjs/app-template

2. Use cd to change into the app's directory

   cd name-of-new-app

3. You can now run the Next.js local development server:

   npm run dev

   The demo application should now be running on localhost:3000.

Check out the docs for Local Development.

Follow our Vercel Integration guide to deploy your new repository to Defer and Vecerl without using the "Deploy to Vercel" button