Does next-export-optimize-images Support TypeScript and Next.js App Router?

Yes, next-export-optimize-images fully supports TypeScript and the Next.js App Router, shipping complete type definitions and webpack-level compatibility that works seamlessly with both the Pages Router and App Router.

next-export-optimize-images is a TypeScript-first build optimization tool designed for Next.js static exports. According to the project's README.md, the library explicitly lists both "Support TypeScript" and "Support AppRouter" as core features【/cache/repos/github.com/dc7290/next-export-optimize-images/main/README.md#L25-L27】.

TypeScript-First Architecture

The library is authored entirely in TypeScript and compiled using tsup. The tsconfig.json enforces strict typing across the entire codebase, ensuring type safety for both internal implementation and consumer-facing APIs.

Type Definitions and Public API

Type definitions are generated in dist/index.d.ts and exposed via the types field in package.json【/cache/repos/github.com/dc7290/next-export-optimize-images/main/package.json#L22-L24】. This allows TypeScript projects to import configuration types and plugin options directly.

import type { Config as ExportImagesConfig } from 'next-export-optimize-images/dist/index'

const myConfig: ExportImagesConfig = {
  // ...your export-images configuration
}

The main entry point src/withExportImages.ts exports an async function that wraps your Next.js configuration, providing full type inference for all configuration objects【/cache/repos/github.com/dc7290/next-export-optimize-images/main/src/withExportImages.ts】.

Next.js App Router Compatibility

next-export-optimize-images achieves App Router support by operating at the webpack level, modifying the build pipeline before router-specific code executes. This approach ensures compatibility regardless of which routing convention you use.

Webpack-Level Integration

In src/withExportImages.ts (lines 73-95), the plugin hooks into Next.js's webpack configuration to replace the default next-image-loader with the custom next-export-optimize-images-loader【/cache/repos/github.com/dc7290/next-export-optimize-images/main/src/withExportImages.ts#L73-L95】. Since both the Pages Router and App Router share the same webpack infrastructure for image optimization, this injection works universally across routing systems.

The loader implementation in src/loader/index.ts performs build-time image optimization using sharp or other engines, processing images regardless of whether your components reside in app/ or pages/ directories.

Configuration Examples

You can configure next-export-optimize-images in both TypeScript and JavaScript Next.js configuration files without losing type safety or functionality.

TypeScript Configuration (next.config.ts)

For App Router projects using TypeScript, import the plugin directly into your next.config.ts:

// next.config.ts
import type { NextConfig } from 'next'
import withExportImages from 'next-export-optimize-images'

const nextConfig: NextConfig = {
  images: {
    loader: 'custom',
  },
}

export default withExportImages(nextConfig)

JavaScript Configuration (next.config.js)

The plugin also works with standard JavaScript configuration files:

// next.config.js
const withExportImages = require('next-export-optimize-images')

module.exports = withExportImages({
  // optional custom Next.js settings
})

Accessing Type Definitions

Import types from the distributed declaration files to type-check your image optimization configuration:

import type { Config as ExportImagesConfig } from 'next-export-optimize-images/dist/index'

const myConfig: ExportImagesConfig = {
  // ...your export-images configuration
}

Summary

• next-export-optimize-images is a TypeScript-first library with complete type definitions exposed via dist/index.d.ts and declared in package.json.
• The plugin supports the Next.js App Router by modifying webpack configuration at build time in src/withExportImages.ts, which both routing systems share.
• Both TypeScript (.ts) and JavaScript (.js) configuration files are fully supported with first-class type inference.
• The custom image loader in src/loader/index.ts works universally across Pages Router and App Router projects because it operates at the build-tool level.

Frequently Asked Questions

Does next-export-optimize-images require TypeScript to work?

No. While the library is written in TypeScript and provides first-class type support through dist/index.d.ts, it works seamlessly in JavaScript projects. The compiled output in dist/index.js is standard JavaScript, and the package.json includes both main and types entries to support both ecosystems equally.

Will this plugin break my existing Pages Router setup?

No. The webpack-level integration in src/withExportImages.ts targets the shared Next.js build pipeline, making it compatible with both routing systems. You can migrate from Pages Router to App Router without changing your image optimization configuration, as the loader replacement happens before router-specific code executes.

Where are the type definitions located?

The type definitions are generated in dist/index.d.ts during the build process. The package.json explicitly declares these types via the "types": "dist/index.d.ts" field (lines 22-24), ensuring TypeScript automatically discovers them when you import the package【/cache/repos/github.com/dc7290/next-export-optimize-images/main/package.json#L22-L24】.

Is the App Router support documented?

Yes. The README.md explicitly lists "Support AppRouter" alongside "Support TypeScript" as verified features in the feature list (lines 25-27)【/cache/repos/github.com/dc7290/next-export-optimize-images/main/README.md#L25-L27】. The source code confirms this through the universal webpack hook implementation in src/withExportImages.ts.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}