Skip to content

Adding Interval to an existing Next.js app

Jump to bottom
Alex Arena edited this page Mar 30, 2022 · 3 revisions

Here's a short guide to using Interval in a Next.js project.

If you prefer to work by example, check out our Next.js starter sample project instead. Otherwise, read on!

Prerequisites

There are two primary approaches to integrating Interval into an existing Next.js app.

⭐️ Same repo, different process (recommended!)

We recommend running your internal tools in a separate process from your user-facing app. This prevents any bugs in your internal tools from impacting your user-facing app. And as a result, this should give you confidence to ship updates to your internal tools on a quicker cadence.

This is what we do ourselves. Even though our codebase is in a single repo, we run our own internal tools using a separate web worker on Render.

Same repo, same process

Interval can be run in the same process as your Next.js app if you're using a custom server custom server. To accomplish this, just import Interval, call interval.listen() and use like any other module in your project.

A custom server is required for this approach, since serverless environments like Vercel don't support our persistent listener model.

Even if you have a custom server, we don't recommend this approach. Running your internal tools in the same process as your user-facing app means that bugs in your internal tools may impact that app.

Installation

To install Interval in your project, we recommend adding these packages for a nice development experience:

Add these packages to your project:

yarn add -D nodemon ts-node tsc-alias tsconfig-paths concurrently
yarn add "@interval/sdk@https://s3.us-west-1.wasabisys.com/interval-sdk/interval-sdk-v0.11.0.tgz"

or...

npm i -D nodemon ts-node tsc-alias tsconfig-paths concurrently
npm i "@interval/sdk@https://s3.us-west-1.wasabisys.com/interval-sdk/interval-sdk-v0.11.0.tgz"

We recommend creating a server folder with an interval.ts file inside:

mkdir server && touch server/interval.ts

(If you already have backend files somewhere else, you can put your interval.ts there)

Visit the Interval dashboard and follow the instructions for adding Interval to an existing codebase to get the sample code. It should look something like this:

// server/interval.ts
import Interval from '@interval/sdk'

const interval = new Interval({
  apiKey: "YOUR_API_KEY",
  actions: {
    enter_a_number: async io => {
      const num = await io.input.number('Enter a number')
      return { num }
    },
  }
})

interval.listen()

We also recommend creating a separate tsconfig.interval.json file that extends your existing tsconfig. This will be used when compiling your TS files for production. The stock tsconfig.json generated by Next typically does not support modules or emitting files to a directory.

// tsconfig.interval.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "noEmit": false
  },
  "include": ["server/**/*.ts"]
}

Next, update your package.json with these scripts (be sure to update the paths if your server files are located somewhere else):

// package.json
"scripts": {
  "dev:interval": "nodemon --watch ./server/**/*.ts --exec ts-node ./server/interval.ts",
  "build:interval": "rm -Rf dist && tsc --project tsconfig.interval.json && tsc-alias -p tsconfig.interval.json",
  "start:interval": "node dist/interval.js"
  ...
},

Here's what each of these commands does:

  • dev:interval: runs your TypeScript files and reloads the server when files in your /server folder change
  • build:interval: compiles your /server folder into /dist and converts aliased paths to relative paths
  • start:interval: runs your compiled Interval files

Feel free to modify these as needed. If your TypeScript config doesn't support module imports, you can update the dev script to read the alternate tsconfig.interval.json we created:

"dev:interval": "nodemon --watch ./server/**/*.ts --exec ts-node -P ./tsconfig.interval.json ./server/interval.ts",

Last thing: optionally update your dev script to run Next and Interval concurrently:

"dev": "concurrently \"next dev\" \"dev:interval\"",

That's it! Check out our example repo for a working example, or ping us on Slack for help.

To start your dev server:

yarn dev:interval # or yarn dev
# or
npm run dev:interval # or npm run dev

In production, be sure to run start:interval when your app restarts. As a reminder, the Interval listener must be running in order for your actions to show up in your Interval dashboard.

Clone this wiki locally