DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Thomas Cosialls
Thomas Cosialls

Posted on

Deploy your Next.js App to Netlify in 2 minutes

Great, you have your Next.js app correctly working on your local machine. You now want to quickly deploy it online to share it with your friends or team. There are several CI/CD services that allow you to publish your static website for free by simply connecting to the Github repository where your project stands:

Let's focus on Netlify from here.

Edit your package.json for production

If you created your Next.js app using the npx create-next-app command, your scripts object in package.json file should look like this:

  "scripts": {
    "dev": "next dev",
    "build": "next build ",
    "start": "next start"
Enter fullscreen mode Exit fullscreen mode

Modify it this way :

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
Enter fullscreen mode Exit fullscreen mode

Now, when we create a production build with npm run build, it will export build files to the out directory.

Setting up your Netlify account

This is the easiest part:

  1. Create your account here
  2. Click on New Site from Git
  3. Follow the linking workflow to connect your Github/Gitlab repo (the one with your Next.js app)
  4. Make sure you set Deploy Settings like this : Alt Text
  5. Click deploy, wait a few seconds and boom, your app is live.
  6. Optional: Connect a custom domain by editing the DNS A record of your domain

From now on, every time you push a new commit to your Git repository, Netlify will automatically be informed to fetch updates and will then rebuild your Next.js project.

Enjoy & Best!

Top comments (2)

nicholasharris profile image
Nicholas Harris

If your project uses Next. js, Netlify automatically installs the Essential Next. js build plugin and provides suggested configuration values. For existing sites already linked to Netlify, you can choose to install the plugin yourself. on average, across our platform, builds take about two minutes. Of course how close you are to this average will be determined by the activity you trigger during your build process.

leandroruel profile image
Leandro RR

found this article on google, it helped me a lot! thanks

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.