Deploy a Next JS exported site to Now

In this article I will talk about some of the features and problems I had when I tried to deploy my site to Zeit Now cloud server, with a Cloudflare domain serving SSL.

My application is built with a special middleware to create a static export with Next Js. This middleware fetch data from Sanity API. The reason I use this middleware is to have the abillity to change and use a Headless CMS of my choice. Iv'e tried several ways and my exported site failed the deployment on Now, but deployed well on my local deployment.

So I needed to look into my configuration, and it turned out that I neeed to set the target to serverless, which didnt work on my local deployment.

My site needed the serverless target to deploy and exported correctly to Now. I also needed to comment out the publicRuntimeConfig. Maybe thats´s my bad knowledge of Next...

const routeBuilder = require('./lib/routeBuilder');

module.exports = {

    css: false,

    poweredByHeader: false,

    exportTrailingSlash: true,

    target: 'serverless',

    exportPathMap: async function (defaultPathMap) {
        return await routeBuilder();
    }
    ,
    generateBuildId: async () => {
        return process.env.NODE_ENV === 'production' ? 'production' : 'dev';
    }
    // ,
    // publicRuntimeConfig: {
    //     DOMAIN: process.env.NODE_ENV === 'production' ? 'https://www.bootproject.no' : 'http://localhost:3434',
    //     staticFolder: 'public',
    //     assetPrefix: process.env.NODE_ENV === 'production' ? "/projects" : ""
    // }
};

Theres two ways of pushing your code to Now. By a git repository or by running a CLI command. To deploy your site to a production site on Zeit Now with CLI, you run the CLI command:

>now --prod

Domain with SSL

Adding you domain is simple. Just go projectsettings and then domains, to add your domain in the Now portal. If youre using Cloudflare it's also easy to point your site to Now and your new website. On cloudflare dashboard, add a cname record: cname www.yourdomain.com with value alias.zeit.co with the ssl turned off. Then go to SSL/TLS and set encryption mode to full. If everything worked out, your site should run fine with SSL support from Zeit to Cloudflare.

Hook

Next up is to create a webhook that will trigger my site to create the new pages, content etc. on my site, when content changes in Sanity Studio. Create a hook in Now dashboard. Remember that you need a connected git repository to do this.

Add a hook to Sanity by: >sanity hook create <yourhookname>
>production
*(all datasets)
?
Select production here
? Hook URL: https://api.zeit.co/v1/integrations/deploy/<A LONG GUID>

Thats all! Now you have a static site/app that rebuilds on content changes. Sure its not that fast as a live rebuild, but who cares about that!! In a minit you'll see your changes on your site.

I cant be more pleased and must say thank you to Guillermo Rauch who is the founder of Next JS and a lot of other frameworks.

Thanks for "Now" and see you "Next" time when I dig into SSG!


Created by Bootproject editor on 2020-03-02


  • multi

    About

    The Swede(me), Rickard Magnusson a Senior Software Engineer, currently employeed as a freelance consultant in Norway.

  • Legal

    Bootproject.se and Footer.se is property of Bootproject and may be used under (MIT)licence . See project on Bitbucket

  • Logo Contact

    Email: bootproject@icloud.com

(©) Copyright www.bootproject.no 2020