next#NextConfig TypeScript Examples

withLodash = (options: Options) => (nextConfig: NextConfig) => {
  return addWebpackPlugin(
    nextConfig,
    new LodashWebpackPlugin({
      caching: true,
      chaining: true,
      cloning: true,
      coercions: true,
      collections: true,
      currying: true,
      deburring: true,
      exotics: true,
      flattening: true,
      guards: true,
      memoizing: true,
      metadata: true,
      paths: true,
      placeholders: true,
      shorthands: true,
      unicode: true,
      ...options,
    }),
  )
}

function telefuncPlugin(nextConfig: NextConfig = {}) {
  return Object.assign({}, nextConfig, {
    webpack: (config, options) => {
      install(config)
      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options)
      }
      return config
    }
  } as NextConfig)
}

export default function withoutMinification(nextConfig: NextConfig) {
  return addWebpackConfig(nextConfig, (nextConfig, webpackConfig) => {
    if (webpackConfig.optimization) {
      webpackConfig.optimization.minimizer = []
    } else {
      webpackConfig.optimization = { minimizer: [] }
    }
    return webpackConfig
  })
}

export default function withoutDebugPackage(nextConfig: NextConfig) {
  return addWebpackLoader(nextConfig, (_webpackConfig, _context) => ({
    test: /\.(ts|tsx|js|jsx)$/i,
    use: [
      {
        loader: path.resolve(__dirname, 'loaders', 'removeDebugPackageLoader.js'),
      },
    ],
  }))
}

export default function withSvg(nextConfig: NextConfig) {
  return addWebpackLoader(nextConfig, (_webpackConfig, _context) => ({
    test: /\.svg$/i,
    issuer: /\.(ts|tsx|js|jsx|md|mdx|scss|sass|css)$/,
    use: [
      {
        loader: '@svgr/webpack',
        options: {
          removeViewbox: false,
          typescript: false,
        },
      },
    ],
  }))
}

getWithRobotsTxt = (content: string) => (nextConfig: NextConfig) => {
  return addWebpackPlugin(
    nextConfig,
    new EmitFilePlugin({
      path: '.',
      filename: 'robots.txt',
      content,
      hash: false,
    }),
  )
}

export default function withResolve(nextConfig: NextConfig) {
  return addWebpackConfig(nextConfig, (nextConfig, webpackConfig) => {
    webpackConfig.resolve = {
      ...webpackConfig.resolve,
      modules: [
        ...(webpackConfig.resolve?.modules ?? []),
        path.resolve(moduleRoot),
        path.resolve(moduleRoot, '..'),
        path.resolve(moduleRoot, 'src'),
        path.resolve(moduleRoot, 'node_modules'),
      ],
    }

    return webpackConfig
  })
}

export default function withIgnore(nextConfig: NextConfig) {
  return addWebpackPlugin(
    nextConfig,
    new webpack.IgnorePlugin({
      checkResource: (resource: string) => {
        return (
          resource.endsWith('awesomplete.css') ||
          resource.includes('core-js/library') ||
          resource.includes('babel-runtime')
        )
      },
    }),
  )
}

getWithFriendlyConsole =
  ({ clearConsole, projectRoot, packageName, progressBarColor }: WithFriendlyConsoleParams) =>
  (nextConfig: NextConfig) => {
    const cfg = addWebpackPlugin(
      nextConfig,
      new FriendlyErrorsWebpackPlugin({
        clearConsole,
        additionalTransformers: [cleanup(), stripProjectRoot(projectRoot)],
        additionalFormatters: [],
      }),
    )

    return addWebpackPlugin(cfg, new WebpackBar({ name: packageName, color: progressBarColor }))
  }

export default function withFriendlyChunkNames(nextConfig: NextConfig) {
  return addWebpackConfig(nextConfig, (nextConfig, webpackConfig, _options) => {
    if (
      typeof webpackConfig.optimization?.splitChunks !== 'boolean' &&
      webpackConfig.optimization?.splitChunks?.cacheGroups
    ) {
      unset(webpackConfig, 'optimization.splitChunks.cacheGroups.lib.name')
      unset(webpackConfig, 'optimization.splitChunks.cacheGroups.shared.name')
    }
    return webpackConfig
  })
}

nextConfig: NextConfig = {
  distDir: `.build/${process.env.NODE_ENV}/tmp`,
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx', 'all-contributorsrc'],
  onDemandEntries: {
    maxInactiveAge: 60 * 1000,
    pagesBufferLength: 2,
  },
  modern: false,
  reactStrictMode: false,
  reactRoot: true,
  experimental: {
    reactRoot: true,
    scrollRestoration: true,
  },
  swcMinify: true,
  productionBrowserSourceMaps: ENABLE_SOURCE_MAPS,
  excludeDefaultMomentLocales: true,
  devIndicators: {
    buildActivity: false,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  compiler: {
    styledComponents: true,
  },
  env: clientEnv,
  poweredByHeader: false,
}

export function addWebpackPlugin(
  nextConfig: NextConfig,
  plugin: WebpackPluginInstance | WebpackPluginFunction | ((this: Compiler, compiler: Compiler) => void) | any,
) {
  return addWebpackConfig(
    nextConfig,
    (nextConfig: NextConfig, webpackConfig: Configuration, { isServer }: WebpackConfigContext) => {
      if (!isServer) {
        if (webpackConfig?.plugins) {
          webpackConfig.plugins.push(plugin)
        } else {
          return { plugins: [plugin] }
        }
      }
      return webpackConfig
    },
  )
}

export function addWebpackConfig(nextConfig: NextConfig, customWebpackConfig: CustomWebpackConfig) {
  const webpack = (webpackConfig: Configuration, options: WebpackConfigContext) => {
    const newConfig = customWebpackConfig(nextConfig, webpackConfig, options)

    if (typeof nextConfig.webpack === 'function') {
      return nextConfig.webpack(newConfig, options)
    }

    return newConfig
  }

  return { ...nextConfig, webpack }
}

getWithExtraWatch =
  ({ files, dirs }: WithExtraWatchOptions) =>
  (nextConfig: NextConfig) => {
    return addWebpackPlugin(nextConfig, new ExtraWatchWebpackPlugin({ files, dirs }))
  }

export function withPlausibleProxy(options: NextPlausibleProxyOptions = {}) {
  return (nextConfig: NextConfig): NextConfig => {
    const nextPlausiblePublicProxyOptions: NextPlausiblePublicProxyOptions = {
      ...options,
      trailingSlash: !!nextConfig.trailingSlash,
    }
    return {
      ...nextConfig,
      publicRuntimeConfig: {
        ...nextConfig.publicRuntimeConfig,
        nextPlausiblePublicProxyOptions,
      },
      rewrites: async () => {
        const domain = getDomain(options)
        const getRemoteScript = (...modifiers: (ScriptModifier | null)[]) =>
          domain +
          getScriptPath(
            {
              scriptName: getRemoteScriptName(
                domain,
                domain !== plausibleDomain
              ),
            },
            ...modifiers
          )
        const plausibleRewrites = [
          {
            source: getScriptPath(options),
            destination: getRemoteScript(),
          },
          ...getCombinations(allModifiers).map((modifiers) => ({
            source: getScriptPath(options, ...modifiers),
            destination: getRemoteScript(...modifiers),
          })),
          {
            source: getApiEndpoint(nextPlausiblePublicProxyOptions),
            destination: `${domain}/api/event`,
          },
        ]

        if (process.env.NEXT_PLAUSIBLE_DEBUG) {
          console.log('plausibleRewrites = ', plausibleRewrites)
        }

        const rewrites = await nextConfig.rewrites?.()

        if (!rewrites) {
          return plausibleRewrites
        } else if (Array.isArray(rewrites)) {
          return rewrites.concat(plausibleRewrites)
        } else {
          rewrites.afterFiles = rewrites.afterFiles.concat(plausibleRewrites)
          return rewrites
        }
      },
    }
  }
}

export default function withRaw(nextConfig: NextConfig) {
  return addWebpackLoader(nextConfig, (_webpackConfig, _context) => ({
    test: /\.(txt|fasta|gff|csv|tsv)$/i,
    type: 'asset/source',
  }))
}

getWithCopy = (options: CopyPluginOptions) => (nextConfig: NextConfig) => {
  return addWebpackPlugin(nextConfig, new CopyPlugin(options))
}

getWithTypeChecking =
  ({ eslint, typeChecking, memoryLimit = 512, exclude }: GetWithTypeCheckingParams) =>
  (nextConfig: NextConfig) => {
    if (!typeChecking && !eslint) {
      return nextConfig
    }

    return addWebpackPlugin(
      nextConfig,
      new ForkTsCheckerWebpackPlugin({
        issue: {
          exclude: exclude?.map((file) => ({ origin: 'typescript', file })),
        },

        typescript: {
          enabled: typeChecking,
          configFile: path.join(moduleRoot, 'tsconfig.json'),
          memoryLimit,
          mode: 'write-references',
          diagnosticOptions: { syntactic: true, semantic: true, declaration: true, global: true },
          configOverwrite: {
            compilerOptions: {
              ...tsConfig.compilerOptions,
              skipLibCheck: true,
              sourceMap: false,
              inlineSourceMap: false,
              declarationMap: false,
            },
            include: [
              'lib/**/*.js',
              'lib/**/*.jsx',
              'lib/**/*.ts',
              'lib/**/*.tsx',
              'src/**/*.js',
              'src/**/*.jsx',
              'src/**/*.ts',
              'src/**/*.tsx',
            ],
            exclude: [...tsConfig.exclude, ...(exclude ?? [])],
          },
        },

        eslint: {
          enabled: eslint,
          memoryLimit,
          files: [path.join(moduleRoot, 'src/**/*.{js,jsx,ts,tsx}')],
          options: { cache: false },
        },

        formatter: 'codeframe',
      }),
    )
  }

export default function withUrlAsset(nextConfig: NextConfig) {
  return addWebpackLoader(nextConfig, (_webpackConfig, _context) => ({
    type: 'asset',
    resourceQuery: /url/, // *.svg?url
  }))
}

export default function withWasm(nextConfig: NextConfig) {
  return addWebpackConfig(nextConfig, (nextConfig, webpackConfig) => {
    set(webpackConfig, 'experiments.asyncWebAssembly', true)
    return webpackConfig
  })
}

export default function withWebpackWatchPoll(nextConfig: NextConfig) {
  return addWebpackConfig(nextConfig, (nextConfig, webpackConfig) => {
    set(webpackConfig, 'watchOptions.poll', 1000)
    return webpackConfig
  })
}

export function addWebpackLoader(nextConfig: NextConfig, getLoader: GetLoaderFunction) {
  return addWebpackConfig(nextConfig, (nextConfig, webpackConfig, options) => {
    const loader = getLoader(webpackConfig, options)
    webpackConfig?.module?.rules?.push(loader)
    return webpackConfig
  })
}

export default function init(withRpcConfig: WithRpcConfig = {}) {
  return (nextConfig: NextConfig = {}): NextConfig => {
    return {
      ...nextConfig,

      webpack(config: webpack.Configuration, options) {
        const { experimentalContext = false } = withRpcConfig;
        const { isServer, dev, dir } = options;
        const pagesDir = findPagesDir(dir);
        const apiDir = path.resolve(pagesDir, './api');

        const rpcPluginOptions: RpcPluginOptions = {
          isServer,
          pagesDir,
          dev,
          apiDir,
          basePath: nextConfig.basePath || '/',
        };

        const contextPluginOptions: ContextPluginOptions = { apiDir, isServer };

        config.module = config.module || {};
        config.module.rules = config.module.rules || [];
        config.module.rules.push({
          test: /\.(tsx|ts|js|mjs|jsx)$/,
          include: [pagesDir],
          use: [
            options.defaultLoaders.babel,
            {
              loader: 'babel-loader',
              options: {
                sourceMaps: dev,
                plugins: [
                  [
                    require.resolve('../dist/babelTransformRpc'),
                    rpcPluginOptions,
                  ],
                  ...(experimentalContext
                    ? [
                        [
                          require.resolve('../dist/babelTransformContext'),
                          contextPluginOptions,
                        ],
                      ]
                    : []),
                  require.resolve('@babel/plugin-syntax-jsx'),
                  [
                    require.resolve('@babel/plugin-syntax-typescript'),
                    { isTSX: true },
                  ],
                ],
              },
            },
          ],
        });

        if (typeof nextConfig.webpack === 'function') {
          return nextConfig.webpack(config, options);
        } else {
          return config;
        }
      },
    };
  };
}