Next.js in Vercel with Sentry - ignore source maps in production

Question

I'm deploying a Next.js app in Vercel with Sentry configuration provided by @sentry/next.js module. Here is the example repo - https://github.com/voronianski/test-next-sentry-app

It uses the official example from Next.js (e.g. https://github.com/vercel/next.js/tree/canary/examples/with-sentry).

Integration with Sentry works perfectly. However I noticed one thing that kind of bothers me. Source maps for each file are publicly available.

Here is the link to the app - https://test-next-sentry-app.vercel.app/ and here is the map file of _app.js https://test-next-sentry-app.vercel.app/_next/static/chunks/pages/_app-b2c4ce59f737104d4ac1.js.map

This leads to the completely visible project structure and source codes in the browser dev tools -

I tried to use .vercelignore file but it didn't help - https://github.com/voronianski/test-next-sentry-app/blob/main/.vercelignore

Is there a way to not deploy source map files to public in Vercel? Thanks!

Answer 1

As suggested by Vercel support - you can use rewrites option in next.config.js to achieve this -

const nextConfig = {
  // ...
  rewrites: async () => {
    // do not leak source-maps in Vercel production deployments
    // but keep them in Vercel preview deployments with generated urls 
    // for better dev experience
    const isVercelProdDeploy = process.env.VERCEL_ENV === 'production';

    if (isVercelProdDeploy) {
      return {
        beforeFiles: [
          {
            source: '/:path*.map',
            destination: '/404'
          }
        ]
      };
    }

    return [];
  },
  // ...
};

module.exports = nextConfig;

https://nextjs.org/docs/api-reference/next.config.js/rewrites