DEV Community

Cédric Karungu
Cédric Karungu

Posted on

1

Publish a npm package using next.js and typescript

Code reusability and modular design are what have made React one of the best JavaScript frameworks out there. Also, thanks to NPM, publishing a new JavaScript module has never been easier. All you need to do is point the main JavaScript file in your package.json
 and run npm publish

let create our own package

Plan

  • initialize next project
  • compile the project
  • config package.json for deployement

Let go

  • create a next project
npx create-next-app myapp -typescript

Enter fullscreen mode Exit fullscreen mode

After creating our app, we need to add some features.
When we finish adding all features to our app, we need to publish it to NPM. We need a file named .npmignore it is similar to .gitignore, it is just to ignore some files and folder when we'll publish our package.

  • add a .npmignore file
# https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package

#tests
test
coverage

#build tools
.travis.yml
.jenkins.yml
.codeclimate.yml

#linters
.jscsrc
.jshintrc
.eslintrc*

#editor settings
.idea
.editorconfig
Enter fullscreen mode Exit fullscreen mode
  • connect or create a NPM account

add this to package.json


{
    "files": [
        "/lib"
    ]
}
Enter fullscreen mode Exit fullscreen mode

make shure this line your package is not private inside package.json "private": false,

  • connect your project to npm
npm login
Enter fullscreen mode Exit fullscreen mode
  • after logged in pusblish to npm
npm publish
Enter fullscreen mode Exit fullscreen mode

now your package is installed

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay