[Bug]: Homepage ignores the headers set in next.config.js when deployed to Netlify

[meness]

Summary

I set some headers in next.config.js as it's recommended on Next.js docs. You also mentioned the version 4 of this cool plugin has full support of Next.js headers, rewrites, and redirects on the release page, so I expect all the headers to be set, but It didn't happen for me. Netlify says this plugin is used and everything else works fine. Also, I tried setting NODE_ENV=production environment and redeploying, but got no luck.

Steps to reproduce

1. Set headers in next.config.js
2. Push changes to GitHub
3. Netlify builds and deploys the project automatically
4. Check the headers of the website using an online tool

A link to a reproduction repository

No response

Plugin version

4.7.0

More information about your build

• I am building using the CLI
• I am building using file-based configuration (netlify.toml)

What OS are you using?

Windows

Your netlify.toml file

`netlify.toml`

[context.production.environment]
NEXT_PUBLIC_X="X"

[context.staging.environment]
NEXT_PUBLIC_X="X"

Your public/_redirects file

`_redirects`

# Paste content of your `_redirects` file here

Your next.config.js file

`next.config.js`

const { withSentryConfig } = require('@sentry/nextjs');
const nextBundleAnalyzer = require('@next/bundle-analyzer');
const { i18n } = require('./next-i18next.config');

const securityHeaders = [
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self';",
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload',
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload',
  },
  {
    key: 'Cross-Origin-Opener-Policy',
    value: 'same-origin',
  },
  {
    key: 'Cross-Origin-Resource-Policy',
    value: 'same-origin',
  },
];

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config, { webpack }) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.tsx?$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            typescript: true,
            filenameCase: 'kebab',
            memo: true,
          },
        },
      ],
    });

    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new webpack.DefinePlugin({
          __SENTRY_DEBUG__: false,
        }),
      );
    }

    return config;
  },
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  pageExtensions: [
    'page.tsx',
  ],
  async rewrites() {
    const rewrites = [
      { source: '/s/:slug*', destination: '/p/:slug*' },
      {
        source: '/api/:slug*',
        destination: 'backend_url:slug*',
      },
    ];

    return rewrites;
  },
  async redirects() {
    return [
      {
        source: '/p/:slug*',
        destination: '/s/:slug*',
        permanent: true,
      },
    ];
  },
  async headers() {
    if (process.env.NODE_ENV === 'production') {
      return [
        {
          source: '/:path*',
          headers: securityHeaders,
        },
      ];
    }

    return [];
  },
  i18n,
};

const withBundleAnalyzer = nextBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer(withSentryConfig(nextConfig));

Builds logs (or link to your logs)

Build logs

# Paste logs here

Function logs

Function logs

# Paste logs here

.next JSON files

generated .next JSON files

# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.

[meness]

I tried to remove the process.env.NODE_ENV check, but still the same

[meness]

The issue here is source: '/:path*' doesn't match the homepage (/) when deployed while it works on localhost. I let this issue be open to make sure the issue is not related to the plugin.

[meness]

I tried source: '/(.*?)' but still the homepage ignores the headers when deployed.

[bhavana-netlify]

Hi @nickytonline looks like the work to fix the bug is done, but we are waiting on docs and some testing to complete before we can close this? is that accurate?
I;d love an update from you re: current state and what is remaining + timeline so I can let the team at Estee know. thank you.

[nickytonline]

Hi @bhavana-netlify, messaged you on Slack. This should be getting merged today.

[meness]

@nickytonline The problem still exists on the latest version

[nickytonline]

@meness, do you have a repository I can pull down to see why you may be having the issue still? We have tests that check that it's working, so maybe there is an edge case we missed.