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 nodemon ts-node tsc-alias tsconfig-paths concurrently

or...

npm i @interval/sdk
npm i -D nodemon ts-node tsc-alias tsconfig-paths concurrently

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",
    "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",

You may also optionally update your dev script to run Next and Interval concurrently:

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

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