DEV Community

It's Just Nifty
It's Just Nifty

Posted on • Originally published at niftylittleme.com on

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!

Unsplash Image by Paul Esch-Laurent

(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"
}
Enter fullscreen mode Exit fullscreen mode

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,
})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

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

export * from "./components/Greet";
Enter fullscreen mode Exit fullscreen mode

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" />
  );
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)