Creating NPM Packages in Next.Js for Next.Js

Note: This tutorial uses the App Router.

So, this was easy. Too easy to literally find nothing on the internet. The information was scarce, but I did find one video. It didn’t tell me exactly what to do, but close enough to figure the rest out on my own. So, in this article, we will be discussing how to create NPM packages in next.js for next.js. So, what are we waiting for? Let’s dive in!

(Image Source)

Setting Up Your Project

First, let’s create a next.js project by running npx create-next-app@latest project_name. Next, install tsup, which is a typescript library bundler. You can install tsup by running npm i -D tsup.

Change your package.json code to look more like this:

{
  "name": "project_name",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "bundle": "tsup src/app/index.ts"
  },
  "dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "tsup": "^8.1.0",
    "typescript": "^5"
  },
  "author": "your_name",
  "license": "MIT",
  "keywords": ["nextjs", "next", "typescript", "tailwindcss"],
  "main": "dist/index.js"
}

Create a tsup.config.ts file in the root of your project and add this code:

import { defineConfig } from 'tsup';

export default defineConfig({
    format: ['cjs', 'esm'],
    entry: ['src/index.ts'],
    dts: true,
    shims: true,
    skipNodeModulesBundle: true,
    clean: true,
})

Add a .npmignore file also in the root of your project and inside add this:

/node_modules
/src
/public

.env

tailwind.config.ts
tsconfig.json
tsup.config.ts

Now that setup is out of the way, it’s time to create some type of function. So, let’s jump right into that.

Adding A Simple Function

Create an index.ts file inside your src/app directory. Also, create a components folder with a file named Greet.tsx inside of it.

The Greet.tsx file should have this code:

export function Greet({ name }: { name: string }) {
    return (
        <h1>Hello, {name}!</h1>
    );
}

Add this line of code to your index.ts file:

export * from "./components/Greet";

Testing And Publishing

Real quick, you can always test it out in your page.tsx files like so:

import {Greet} from "./components/Greet";

export default function Home() {
  return (
    <Greet name="World" />
  );
}

But, to test it out in a different project, you will need to do some things first.

Run npm run bundle to create a dist folder.

Then run npm link and in another project run npm link package_name. This only works locally.

To actually publish your package, run npm adduser to authenticate your NPM account. Then run npm publish. You might need to run npm publish –access=public instead.

That wraps up this article on creating NPM packages with next.js for next.js. If you liked this article, follow me on Medium and subscribe to my Newsletter.

Happy Coding!