Skip to content

Adding Interval to a Next.js app using a different process

Jump to bottom
Dan Philibin edited this page Jul 3, 2023 · 4 revisions

When adding Interval to your Next.js app, we recommend running Interval in a separate process. Separating internal tools into their own process prevents 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. Moreover, if you're deploying your user-facing app to a serverless environment like Vercel, a separate process is the only supported approach as Interval doesn't support deploying to serverless environments.

With that in mind, it's easy modify your Next.js codebase to include an Interval app for your internal tools.

Installation

First, add these packages as development dependencies:

To add these packages and the Interval SDK to your project:

yarn add @interval/sdk
yarn add -D tsx tsc-alias

or...

npm i @interval/sdk
npm i -D tsx tsc-alias

Next, create a server folder containing an interval.ts file:

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()

You can place this code in the interval.ts file that we created above.

We also recommend creating a separate tsconfig.interval.json file that extends your existing tsconfig. This will be used when compiling your Interval TypeScript 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",
    "noEmit": false,
    "outDir": "dist",
    "rootDir": "./"
  },
  "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": "tsx watch server/interval.ts",
  "build:interval": "rm -Rf dist && tsc --project tsconfig.interval.json && tsc-alias -p tsconfig.interval.json",
  "start:interval": "node dist/server/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 TypeScript code into /dist and converts aliased paths to relative paths
  • start:interval: runs your compiled Interval files

Finally, 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.

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

Clone this wiki locally