Similar CSS chunks in Next.js

Question

I'm trying to figure out why Next.js inserts two similar chunk of CSS, like so

<link rel="preload" href="/_next/static/css/styles.chunk.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/styles.chunk.css"/>

I want only one with rel equals "preload". What can I do for this? In my next.config.js is nothing criminal:

const withImages = require('next-images')
const withSass = require('@zeit/next-sass')
const TerserPlugin = require('terser-webpack-plugin')

const env = process.env.NODE_ENV || 'development'

const configs = {
  development: {
    BASE_URL: 'http://localhost:8110'
  },
  production: {
    BASE_URL: 'https://some-url'
  }
}[env]

module.exports = withSass(
  withImages({
    minified: true,
    optimization: {
      minimizer: [new TerserPlugin()]
    },
    env: {
      ...configs,
      ...other options
    }
  })
)

Thanks.

Answer 1

This is how preloading with link tags works.

If you check out the example on the MDN you will see a very similar layout as yours with a preload link, and then the stylesheet link.

Preloading Content With rel=preload