Next-public NPM

next-public

A webpack plugin to compile TypeScript files in the public folder of a Next.js project.\ I created this Webpack plugin because I wanted to use TypeScript in the public folder of my Next.js project but Next.js doesn't support this out of the box.

Features

Write your Service Workers and your Web Workers in TypeScript
Handle process.env.NEXT_PUBLIC_* in your TypeScript files
Compile and minify your TypeScript files
Detect files to compile with autoDetect option and +public directory
Inject a SHA-1 hash of the file content into %checksum% variable in the compiled file
Support for CommonJS and ES modules

Installation

npm install --save-dev next-public

Usage

Auto-detect `*.ts` files with `+public` directory

// next.config.js
const { NextPublicTsPlugin } = require("next-public");

const nextConfig = {
  webpack(config, context) {
    config.plugins.push(
      new NextPublicTsPlugin({
        autoDetect: true,
      }),
    );
    return config;
  },
};

With `inputDir` and `outputDir` options

// next.config.mjs
import path from "node:path";
import { NextPublicTsPlugin } from "next-public";

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  webpack(config, context) {
    config.plugins.push(
      new NextPublicTsPlugin({
        inputDir: path.join("src", "app", "+public"),
        outputDir: path.join("public"),
      }),
    );
    return config;
  },
};

export default nextConfig;

Examples

You can find examples in the examples directory.

Plugin options

enabled : A boolean value indicating whether the plugin should be enabled. Defaults to true.\ NOTE : Use this option to disable the plugin in development mode.
autoDetect : A boolean value indicating whether the plugin should automatically detect the TypeScript files in the input directory. Defaults to false.\ e.g. : If you want to let the plugin to detect TypeScript files in app/+public directory.
inputDir : A string representing the path to the directory containing the TypeScript files to be compiled.
outputDir : A string representing the path to the directory where the compiled JavaScript files will be written.