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

> Discover if next-export-optimize-images supports TypeScript and Next.js App Router. Learn how it seamlessly integrates with Pages and App Routers for optimal image performance.

- Repository: [d-suke/next-export-optimize-images](https://github.com/dc7290/next-export-optimize-images)
- Tags: faq
- Published: 2026-02-28

---

**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](https://github.com/dc7290/next-export-optimize-images) is a TypeScript-first build optimization tool designed for Next.js static exports. According to the project's [README.md](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/dist/index.d.ts) and exposed via the `types` field in [`package.json`](https://github.com/dc7290/next-export-optimize-images/blob/main/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.

```typescript
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`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/next.config.ts):

```typescript
// 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:

```javascript
// 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:

```typescript
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`](https://github.com/dc7290/next-export-optimize-images/blob/main/dist/index.d.ts) and declared in [`package.json`](https://github.com/dc7290/next-export-optimize-images/blob/main/package.json).
- The plugin supports the Next.js App Router by modifying webpack configuration at build time in [`src/withExportImages.ts`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/dist/index.d.ts), it works seamlessly in JavaScript projects. The compiled output in [`dist/index.js`](https://github.com/dc7290/next-export-optimize-images/blob/main/dist/index.js) is standard JavaScript, and the [`package.json`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/dist/index.d.ts) during the build process. The [`package.json`](https://github.com/dc7290/next-export-optimize-images/blob/main/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](https://github.com/dc7290/next-export-optimize-images/blob/main/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`](https://github.com/dc7290/next-export-optimize-images/blob/main/src/withExportImages.ts).