Next.js Static App, Built and Deployed with Now
Demo URL: https://nextjs-static-example.zeit.sh/
This repository holds an example of a Next.js application that is setup to be built and deployed in the same process under Now.
With the use of a
Dockerfile we can run our build process within the Now deployment lifecycle, then let Now deploy the
./public directory (the necessary directory for Now to deploy files in this setup).
This example is explained in-depth on the ZEIT Docs for Static Builds.
The project at a glance
This project has three dependencies to build:
This is the base of a very simple Next.js application. There's no additional dependencies required since Next.js builds everything for you, you just need an understanding of React and Next.js and you're good to go!
If you want to clone or fork this project to use as a base, that's fine. Here's a little information to get you going:
First, you'll want to install the dependencies. This project is setup to use Yarn, but you're free to switch to npm if you wish. To install dependencies with Yarn, use the following command in a terminal under the directory of this app:
$is a symbol to represent the terminal input and isn't part of the command
Once the dependencies are installed you can a few scripts that exist in the
To start a development server locally, run the following:
$ yarn dev
If you want to test a staticly exported version of your app, you can use this command:
$ yarn build && yarn export -o /public
Docker and Deploying
For Now to identify the build process, this project holds a
Dockerfile which lists the build and export command inside. Of course, this means you can also build the Docker image locally to test:
$ docker build -t my-nextjs-app .
Dockerfile, as mentioned, and the
now.json file configuring the
static, when deploying to Now, Now will detect the
Dockerfile and build the app as instructed. Once this is done, our static app will be in the working directory of the Docker image under the
./public directory. Now will see this directory we've made and recognise to upload this as a static app.
Note that Now requires a
./publicdirectory to deploy a static app after a build from a
To run Now, all we need is one command:
That's it! Now will build and deploy our app and give us back a deployment URL where we can see our Next.js static app live. Built the way we want and live for us to see with just one command and an easy setup.
Next.js is a React-based framework that supports static or server-rendered apps out of the box. No extra config is required, just pick up and go.
You can learn more about Next.js here: https://nextjs.org
Now is a quick and easy deployment platform with a CLI and Desktop app that makes it as easy as one command or dragging and dropping a file/directory to deploy your apps.
Now supports static apps with great default configurations and extra options, and also dynamic apps so you can run your server-based Node.js or Docker based apps simply.
Learn more: https://zeit.co/now
Read the documentation to get started: https://zeit.co/docs