How do I map next.config.js code samples in the Next docs to T3's implementation?

Next shows examples using module.exports like

module.exports = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

module.exports = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

but the config file generated by the T3 cli has:

const config = {};

export default config;

const config = {};

export default config;

How do I translate the code presented by the Next docs to the implementation used in T3?

Solution:

as simple as this: ```js const config = { async headers() { return [...

Jump to solution

3 Replies

Solution

Jacob•7mo ago

as simple as this:

const config = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

export default config;

const config = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

export default config;

i would also go as far as typing it as well:

/** @type {import('next').NextConfig} */
const config = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

export default config;

/** @type {import('next').NextConfig} */
const config = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

export default config;

then you will get intellisense

HuperniketesOP•6mo ago

That works well, thanks! Especially with the JsDoc type specifier. Before your answer, I had resorted to defining the headers function outside config's definition:

async function
headers()
{
  return [
    {
      source: "/about",
      headers: [
        {
          key: "x-custom-header",
          value: "my custom header value",
        },
        {
          key: "x-another-custom-header",
          value: "my other custom header value",
        },
      ],
    }
  ]
}

const config = {
    headers: headers,
};

async function
headers()
{
  return [
    {
      source: "/about",
      headers: [
        {
          key: "x-custom-header",
          value: "my custom header value",
        },
        {
          key: "x-another-custom-header",
          value: "my other custom header value",
        },
      ],
    }
  ]
}

const config = {
    headers: headers,
};

But that's pretty kludgy for a single entry in the config declaration.

Jacob•6mo ago

Yeh defintly not the prettiest solution

Gaming

Programming

How do I map next.config.js code samples in the Next docs to T3's implementation?