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!
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!
Top comments (0)