Enhance your Vercel deployment previews with FeaturePeek

If you deploy your Next.js app on Vercel, you can use FeaturePeek's Next.js plugin to add more functionality to your Vercel deployment previews.

The easiest way to start a new project on Vercel with FeaturePeek enabled is to use the Deploy Button below. Using the Deploy Button lets you automate most steps — you can skip down to step 4 afterwards.

Deploy with Vercel

Note: Using the Deploy Button also sets the required environment variables on your production environment. This is so that you can see and try out the FeaturePeek UI as soon as your first deployment is live. You'll probably want to change this so that the FeaturePeek UI only appears on your Preview environments — jump to step 6 to learn how.

1. Add the FeaturePeek integration from the Vercel Marketplace

Go to the FeaturePeek integration page on the Vercel Marketplace and click the Add button. You'll be prompted to select projects to add the integration.

Adding the FeaturePeek integration automatically sets the following environment variables for your Preview environments on the projects you select.

  • FEATUREPEEK_ENABLE
  • VERCEL_GITHUB_COMMIT_SHA
  • VERCEL_GITHUB_COMMIT_REF
  • VERCEL_GITHUB_REPO
  • VERCEL_GITHUB_ORG

While these environment variables are required to be present in your project settings dashboard to get FeaturePeek working, you don't need to specify any values in the env key of your next.config.js file. This ensures that your project can still build in development and production environments.

2. Add Next.js plugin as devDependency

Use your preferred method of yarn or npm to install the Next.js FeaturePeek plugin. Currently, Next.js only loads plugins under the @next scope, which is why the dependency's version is aliased to a GitHub repo slug. In future versions of Next.js, you'll be able to omit the version.

yarn add @next/[email protected]/next-plugin-featurepeek --dev

or

npm i @next/[email protected]/next-plugin-featurepeek --save-dev

Since @next/plugin-featurepeek adheres to the plugin system proposed for a future version of Next.js, you'll have to opt-in to the experimental feature:

// next.config.js
module.exports = {
experimental: {
plugins: true
}
}

3. Create a new pull request

For your new environment variables and dev dependency to take effect, you'll need to push your branch to your remote. While you're at it, create a pull request too.

Wait for your deployment preview to be ready — you'll see a link posted in your pull request by Vercel.

You should now see the FeaturePeek icon in the lower left-hand corner of your deployment preview. If you don't see it, make sure that the environment variables in step one were indeed set, and that you've installed the dev dependency correctly.

4. Install GitHub App on repo

Install the FeaturePeek GitHub App on the frontend repos that you deploy to Vercel. This will grant permission for pull request comments to be loaded in the FeaturePeek drawer on the deployment preview.

Depending on your GitHub org, you may need to remove third-party access restrictions for OAuth apps in your org. You'll be prompted within the FeaturePeek UI whether or not you need to do this step.

Please reload the page after you install the GitHub app or change any settings.

5. Create a FeaturePeek account and connect to integrations

Et voila! At this point, you should be able to see the FeaturePeek drawer loaded in the lower left-hand corner of your web app.

Signing in to FeaturePeek will let you post comments and create new issues on your favorite third-party bug tracking services. We recommend you sign up via GitHub OAuth, so that when you comment on a pull request, the comment appears as coming from you instead of the FeaturePeek bot.

You'll want to integrate with Vercel to fetch the build logs and team members of each deployment preview. Select Vercel from the integrations pane in the FeaturePeek drawer and authenticate via the OAuth flow.

FeaturePeek also supports the following integrations for bug reporting and ticketing:

  • Clubhouse
  • GitHub Issues
  • Linear
  • Monday.com
  • Trello

6. Remove environment variables from production target (optional)

If you initialized your project via the Vercel Deploy Button, you'll need to remove some environment variables so that the FeaturePeek chrome doesn't appear in your production environments. When you're ready, you can do that in your project settings under Environment Variables. Be sure to leave the values for your Preview target intact.

Note: If you installed the FeaturePeek integration from the Vercel Marketplace, the required environment variables only get set on your Preview environments, so you don't need to do this step.