Simple type checking for next.config.js
This isn’t so much a real article but more a re-publication of a part of Next.js’ documentation, as I think it’s important that it's shared. Regarding the usage of types for next.config.js, there isn’t any real official support by the Next.js team as usage of a Typescript-file for this config isn’t possible without some hacks.
Since version 10.2.3, the following snippet of code is available in the documentation to enable a simple variant of type checking. Note that we’re using Typescript, but the config-file won’t get transpiled by the project’s bundler. The feature that's being used is the "@type"-tag from JSDoc to import types in a JS file.
// Add the following line at the top of the file:
// @ts-check
// Then for the config itself, import the types
// via '@type'-tag.
/**
* @type {import('next/dist/next-server/server/config').NextConfig}
**/
const nextConfig = {
/* config options here */
}
// End of file.
module.exports = nextConfig
Of course you can also set up a custom Typescript-config and preprocessor step to transpile the config to Javascript on your own. But for now, I think it’s not worth the effort, as there’s no substantial support for Typescript by plugin providers. So after all, you end up with types for your base config, but still would need “any” for all other plugins without types yet.
