NextJS Vercel Deployment¶
This article will walk you through the process of deploying your NextJS project to Vercel. We use one of our starters as an example, so you might want to check them out, check the links below.
Prerequisites¶
- Flotiq account
- Vercel account
- Website, sourcing content from Flotiq.
Note
You might want to try one of our starters, which already comes with predefined content:
- Recipe website Gatsby starter
- Event calendar Gatsby starter
- Project portfolio Gatsby starter
- Simple blog Gatsby starter
- Gatsby and Snipcart boilerplate, sourcing products from Flotiq
- Snipcart and Next.js, sourcing products from Flotiq
- Snipcart and Angular with Scully, sourcing products from Flotiq
- Simple blog using Angular with Scully
These starters all come with detailed READMEs and a one-line content import command, be sure to check those!
Signing in to Vercel¶
If you do not have a Vercel account, the easiest way to create one and use this tutorial is to use GitHub on the Vercel sign-up page. Vercel will ask you to authorize with your GitHub account. If you need to request access to one or more repositories, you can click request access here or later when creating an instance.
Go to the Vercel site and click the Sign Up button on the top right of the site.
You will be asked about the Plan type and your name.
On the next page, connect your Git provider. In this example, we will be using GitHub:
Log in to your GitHub account and authorize Vercel to access your GitHub account information:
Deployment¶
Once you’ve configured your account, you should be taken to your project overview site. If not, go to the Vercel’s main site.
Then click Import Project to use a GitHub repository to create a project.
You might need to approve the access to your GitHub repositories.
Then select the repository that contains your project.
After selecting the repository, you can specify a name for your site, root directory, build command, and environmental variables. As our project is in the repository’s root, the root directory remains empty.
In this example, we need to specify two environment variables: FLOTIQ_API_URL and FLOTIQ_API_KEY.
If you need to add some more, just click on New variable.
For more information about environment variables, check this section
If everything looks fine, click the Deploy button and wait for Vercel to deploy your application.
After a while, you should see a notification, that your deployment succeeded.
Congratulations, you’ve successfully deployed your Flotiq-based site on Vercel!
Setting up Environment Variables¶
An environment variable references a value that can affect how running processes will behave on a computer, for example, in staging and production environments. You must save environment variables in Netlify to authorize your instance to pull source data from Flotiq.
The essential two environment variables needed for every Gatsby project are FLOTIQ_API_KEY and FLOTIQ_API_URL. In some cases, you will provide additional environmental variables for your application to work.
For example, if you're using the Gatsby and Snipcart starter you will also provide the Snipcart API key. The project Readme always described the needed variables.
To obtain the Flotiq API key - in your Flotiq account, click your profile icon in the sidebar and go to API keys:
You can either select the application-wide read-only key:
Or, as a safer option, create a scoped read-only API key that will only be used for the Vercel build. Read more about Flotiq API access.
Copy the Read-Only key and paste it into Vercel settings as FLOTIQ_API_KEY. For the FLOTIQ_API_URL variable, put https://api.flotiq.com.
Info
Flotiq doesn't enforce any particular way of selecting drafts or non-public versions of your pages.
The Read-Only key you copied will give you access to all your content. If you'd like to set up draft and public versions of your pages, you can do so by adding an extra field to your content types and querying for it in your GraphQL queries.