Deploying a Prismic and Next.js blog to Now

This blog post is part of a series of posts on developing a blog with Next.js and Prismic. If you missed the first one you can find that here. If you have not been following along or just want to deploy something to Now, then you can pull the starter files from GitHub and checkout branch 04-previewing.

In this post we will be using Now to deploy our blog. Now makes serverless application deployment easy! Not only that, but their free tier is very generous. At the end of this post we will also be looking at setting up the GitHub integration where each PR deploys that branch so you can test. Then once merged to master it will also deploy.

If you have not been following along you can skip this bit, otherwise, I have updated all of the packages to the latest version (at the time of writing) so to make sure there is no inconsistencies you should update also. The versions I am using are:

// package.json
{
  "dependencies": {
    "cookie-parser": "^1.4.3",
    "cookies": "^0.7.3",
    "express": "^4.16.4",
    "next": "^7.0.2",
    "next-cookies": "^1.0.4",
    "prismic-javascript": "^2.0.1",
    "prismic-reactjs": "^0.3.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

Now

Ok so now that your all up to date let's get started. First thing we need to do is head over to Now and sign up for an account. You can sign up via email or GitHub which is the handiest.

Next we need to install the Now CLI and log into our newly created account:

npm install -g now
now login

Just follow the instructions to log in. They make it very easy.

Config Time

Ok time to add some configuration files and then we are ready to deploy. (I know already)

At the root of the project add a new file:

// now.json
{
  "version": 2,
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    }
  ]
}

The configuration is light weight enough. We set the version to use Now V2. We set next.config.js as our entry point which we will create in just a tick. Then finally we tell Now which builder to use. Builders are modules that take a deployment's source and return an output, consisting of either static files or dynamic Lambdas. In this case we are telling Now to use the Next.js builder.

Before we can deploy we just need to create the next.config.js entry point. This file won't actually do anything but it is needed.

// next.config.js
module.exports = () => ({})

Time to Deploy

All that we need to do now is deploy 😃 Back in your terminal we are going to use Now CLI to deploy. In your terminal, in the project directory run the following:

now deploy

This will deploy your application in a couple of seconds. In the terminal you see a URL output, you can visit this to see your deployed site. The one I just deployed while writing this article can be viewed at https://nextjs-prismic-blog-series-2s8fta3ul.now.sh.

From here any time you make some changes you can just re-run now deploy and it will create new instance. If you do this, you might notice that each build has a new URL. This is due to Now's immutable architecture. If you own a domain that's not in use we can alias the latest build to it. But we would need to do this manually with each new build, remember builds are immutable. So each time we deploy we need to ensure the latest build is aliased to our domain. You could easily forget to do this. But luckily the Now Github integration takes care of this and is simple to set up along with being powerful.

Now + Github

At the end of this section what we will have is:

• Each time we open a PR, Now will build and deploy with our latest changes
• Once a PR is merged to master, Now will build and deploy with our latest changes along with auto aliasing that build to our defined domain

Lets connect Github, head over to your account on Zeit and you should see an option to install Now for Github, click on this:

From there just follow the steps, you will be asked what repositories you would like to add it to. You can add it to all or just selected ones. All that you need to do on the selected repositories is ensure there is a now.json configuration.

With these steps we have now enabled deploys on every push in branches and pull requests.

Last thing is to auto alias our domain when built on master.I didn't actually purchase a domain for the example blog so the domain I use won't be accessible. I recently purchased another domain for a different project over at https://zeit.co/domains and it made everything simple. If you have a domain not purchased with Zeit, that's no problem it will still work, you can find the steps to follow here to verify it. You may need to do this before the following will work correctly. To auto alias our domain we simply need to add an alias property to our now.json config. See the updated now.json configuration below:

// now.json
{
  "version": 2,
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    }
  ],
  "alias": ["www.myexampleblog.com"]
}

Once you commit and push that, any new PR opened that has this config, will be picked up by Now and a build will start. You can see and example PR I have opened here. When first opened, you will see some activity like:

Once complete, this will give you a unique URL to view your build. If you are happy with it, all you have to do is merge to master. From here now will then build and deploy again. If the alias property is set in now.json this will auto alias to your domain every time.

Routes

If you have no custom server or routes then the above should cover you. But in this series we are using a custom server along with custom routes so we will need to handle them. If you tried refreshing one of the blog post pages you would of noticed a 404 error. To fix this we need to add routes property to our now.json configuration, add the following:

// now.json
"routes": [
    {
      "src": "/blog/(?<slug>.+)",
      "dest": "/blogPost?slug=$slug"
    }
  ]

We will still need a custom server for local development for now as at the time of writing, Now Dev is still in development. Once complete it will simulate Now's environment locally. You can keep an eye on their blog for updates.

Useful Links

• Now Builders Overview
• Next.js Builder Documentation
• Now Deployment Immutability
• Now + Github Official Documentation

As always if you enjoyed the post give it a share, or if you have any feedback, questions or corrections please give me a shout on Twitter.