Skip to content

Commit ab93613

Browse files
authored
Upgrade to Vercel and Next.js v12 (#5)
1 parent 47f9e19 commit ab93613

40 files changed

+4160
-11937
lines changed

.env.build.example renamed to .env.local.example

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
# XXX Copy this file as ".env.build", will be used only in development stage. For staging/production stages, check the config at "now.ORGANISATION_NAME.APP_STAGE.yml".
1+
# XXX Copy this file as ".env.local", will be used only in development stage. For staging/production stages, check the config at "now.ORGANISATION_NAME.APP_STAGE.yml".
22
# XXX Used during the build step in next.config.js
3-
# See https://zeit.co/docs/v2/environment-variables-and-secrets#local-development
3+
# See https://vercel.com/docs/v2/environment-variables-and-secrets#local-development
44

5-
# The environment is "where" the application is running. It can be either "development" (localhost) or "production" (on Zeit's servers)
5+
# The environment is "where" the application is running. It can be either "development" (localhost) or "production" (on Vercel's servers)
66
NODE_ENV=development
77

8-
# The stage is "how" the application is running. It can be either "development" (localhost), "staging" or "production" (on Zeit's servers)
8+
# The stage is "how" the application is running. It can be either "development" (localhost), "staging" or "production" (on Vercel's servers)
99
APP_STAGE=development
1010

1111
# Sentry DSN, used to report events (errors, etc.)

.eslintrc.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ rules: # See https://eslint.org/docs/rules
4141
- always
4242
max-len: 0 # Disable line length checks, because the IDE is already configured to warn about it, and it's a waste of time to check for lines that are too long, especially in comments (like this one!)
4343
strict: 'off'
44-
no-console: 2 # Shouldn't use "console", but "logger" instead
44+
no-console: 0 # Shouldn't use "console", but "logger" instead
4545
allowArrowFunctions: 0
4646
no-unused-vars:
4747
- warn # Warn otherwise it false-positive with needed React imports
@@ -75,5 +75,5 @@ rules: # See https://eslint.org/docs/rules
7575
linebreak-style:
7676
- error
7777
- unix
78-
'@typescript-eslint/ban-ts-ignore': warn
78+
'@typescript-eslint/ban-ts-comment': warn
7979
'@typescript-eslint/no-use-before-define': warn

.github/workflows/deploy-zeit-production.yml

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# XXX See https://help.github.com/en/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions
2-
# Deploy to Zeit when anything is pushed in the "master" branch.
3-
# You must have added a GitHub secret "ZEIT_TOKEN" in your GitHub project for the deploy to succeed
2+
# Deploy to Vercel when anything is pushed in the "master" branch.
3+
# You must have added a GitHub secret "VERCEL_TOKEN" in your GitHub project for the deploy to succeed
44
name: Deploy to Now production
55

66
on:
@@ -16,15 +16,15 @@ jobs:
1616
- name: Installing node.js
1717
uses: actions/setup-node@v1 # Used to install node environment
1818
with:
19-
node-version: '10.x' # Use the same node.js version as the one Zeit's uses (currently node10.x)
19+
node-version: '10.x' # Use the same node.js version as the one Vercel's uses (currently node14.x)
2020

2121
deploy-production:
2222
name: Deploy on production
2323
runs-on: ubuntu-latest
2424
needs: setup # Need to wait for setup
2525
steps:
2626
- uses: actions/checkout@v1 # Get last commit pushed
27-
- name: Deploying on Zeit
28-
run: yarn deploy:production --token $ZEIT_TOKEN
27+
- name: Deploying on Vercel
28+
run: yarn deploy:production --token $VERCEL_TOKEN
2929
env:
30-
ZEIT_TOKEN: ${{ secrets.ZEIT_TOKEN }} # Passing github's secret to the worker
30+
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} # Passing github's secret to the worker

.github/workflows/deploy-zeit-staging.yml

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# XXX See https://help.github.com/en/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions
2-
# Deploy to Zeit when anything is pushed in the "master" branch.
3-
# You must have added a GitHub secret "ZEIT_TOKEN" in your GitHub project for the deploy to succeed
2+
# Deploy to Vercel when anything is pushed in any branch other than the "master" branch.
3+
# You must have added a GitHub secret "VERCEL_TOKEN" in your GitHub project for the deploy to succeed
44
name: Deploy to Now staging
55

66
on:
@@ -16,15 +16,15 @@ jobs:
1616
- name: Installing node.js
1717
uses: actions/setup-node@v1 # Used to install node environment
1818
with:
19-
node-version: '10.x' # Use the same node.js version as the one Zeit's uses (currently node10.x)
19+
node-version: '10.x' # Use the same node.js version as the one Vercel's uses (currently node14.x)
2020

2121
deploy-staging:
2222
name: Deploy on staging
2323
runs-on: ubuntu-latest
2424
needs: setup # Need to wait for setup
2525
steps:
2626
- uses: actions/checkout@v1 # Get last commit pushed
27-
- name: Deploying on Zeit
28-
run: yarn deploy --token $ZEIT_TOKEN
27+
- name: Deploying on Vercel
28+
run: yarn deploy --token $VERCEL_TOKEN
2929
env:
30-
ZEIT_TOKEN: ${{ secrets.ZEIT_TOKEN }} # Passing github's secret to the worker
30+
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} # Passing github's secret to the worker

.gitignore

+3-2
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,12 @@ coverage/
116116

117117
# misc
118118
.env*
119-
!.env.build.example
119+
!.env.local.example
120120

121121
# debug
122122
npm-debug.log*
123123
yarn-debug.log*
124124
yarn-error.log*
125125

126-
.now
126+
.now
127+
.vercel

.idea/next-typescript-api-zeit-boilerplate.iml

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.nowignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ node_modules/
44
coverage/
55
.codeclimate.yml
66
.editorconfig
7-
.env.build.example
7+
.env.local.example
88
README.md
99
yarn.lock
1010
yarn-error.log

.nvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v12.16.1
1+
v14

README.md

+44-44
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<a href="https://unly.org"><img src="https://storage.googleapis.com/unly/images/ICON_UNLY.png" align="right" height="20" alt="Unly logo" title="Unly logo" /></a>
2-
[![Maintainability](https://api.codeclimate.com/v1/badges/8eb12b795ca757dbc07d/maintainability)](https://codeclimate.com/github/UnlyEd/next-typescript-api-zeit-boilerplate/maintainability)
3-
[![Test Coverage](https://api.codeclimate.com/v1/badges/8eb12b795ca757dbc07d/test_coverage)](https://codeclimate.com/github/UnlyEd/next-typescript-api-zeit-boilerplate/test_coverage)
4-
[![Known Vulnerabilities](https://snyk.io/test/github/UnlyEd/next-typescript-api-zeit-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/UnlyEd/next-typescript-api-zeit-boilerplate?targetFile=package.json)
2+
[![Maintainability](https://api.codeclimate.com/v1/badges/8eb12b795ca757dbc07d/maintainability)](https://codeclimate.com/github/UnlyEd/next-typescript-api-vercel-boilerplate/maintainability)
3+
[![Test Coverage](https://api.codeclimate.com/v1/badges/8eb12b795ca757dbc07d/test_coverage)](https://codeclimate.com/github/UnlyEd/next-typescript-api-vercel-boilerplate/test_coverage)
4+
[![Known Vulnerabilities](https://snyk.io/test/github/UnlyEd/next-typescript-api-vercel-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/UnlyEd/next-typescript-api-vercel-boilerplate?targetFile=package.json)
55

6-
# Next.js with TypeScript, powered by Zeit Now for building APIs
6+
# Next.js with TypeScript, powered by Vercel Now for building APIs
77

8-
> This is a more detailed example of a universal [Next.js](https://nextjs.org) app that can be deployed with ZEIT Now and zero configuration.
8+
> This is a more detailed example of a universal [Next.js](https://nextjs.org) app that can be deployed with Vercel and zero configuration.
99
>
1010
> **The default configuration is focused on backend development** (APIs), yet uses Next.js framework (universal framework) in case rendering UI becomes necessary later on.
11-
> **But you can use this to quick start a frontend + backend project as well.** _(we will release another OSS boilerplate with a very complete boilerplate for a rock-solid production app with Next/Zeit/TypeScript before 2020!)_
11+
> **But you can use this to quick start a frontend + backend project as well.** _(we will release another OSS boilerplate with a very complete boilerplate for a rock-solid production app with Next/Vercel/TypeScript before 2020!)_
1212
>
1313
> This boilerplate uses Sentry for tracking errors that happens on the server, but feel free to use another tool, it's merely used as an example.
1414
@@ -25,14 +25,14 @@
2525
- [TODO (after generating a project from this boilerplate)](#todo-after-generating-a-project-from-this-boilerplate)
2626
- [Getting started](#getting-started)
2727
- [Deploying From Your Terminal](#deploying-from-your-terminal)
28-
- [Deploying through Zeit <> GitHub CI/CD (official way, not recommended)](#deploying-through-zeit--github-cicd-official-way-not-recommended)
29-
- [Deploying through Zeit <> GitHub Actions CI/CD (our way)](#deploying-through-zeit--github-actions-cicd-our-way)
28+
- [Deploying through Vercel <> GitHub CI/CD (official way, not recommended)](#deploying-through-vercel--github-cicd-official-way-not-recommended)
29+
- [Deploying through Vercel <> GitHub Actions CI/CD (our way)](#deploying-through-vercel--github-actions-cicd-our-way)
3030
- [API](#api)
3131
- [Test](#test)
3232
- [CodeClimate](#codeclimate)
3333
- [EsLint](#eslint)
3434
- [Sentry](#sentry)
35-
* [Configuring secret SENTRY_DSN in Zeit](#configuring-secret-sentry_dsn-in-zeit)
35+
* [Configuring secret SENTRY_DSN in Vercel](#configuring-secret-sentry_dsn-in-vercel)
3636
- [Vulnerability disclosure](#vulnerability-disclosure)
3737
- [Contributors and maintainers](#contributors-and-maintainers)
3838
- [**[ABOUT UNLY]**](#about-unly-)
@@ -41,25 +41,25 @@
4141

4242
## Deploy Your Own project (ultimate quick start)
4343

44-
Deploy your own Next.js project based on this template with ZEIT Now. ([free](https://zeit.co/pricing))
44+
Deploy your own Next.js project based on this template with Vercel. ([free](https://vercel.com/pricing))
4545

46-
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/UnlyEd/next-typescript-api-zeit-boilerplate)
46+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/UnlyEd/next-typescript-api-vercel-boilerplate)
4747

48-
**Pro tip**: If you allow Zeit to access your GitHub account, it will even create the GitHub repository for you and automatically link it to your Zeit project and enable Zeit <> GitHub integration (automated CI/CD).
49-
**[Though, beware this](#deploying-through-zeit--github-cicd-official-way-not-recommended).**
48+
**Pro tip**: If you allow Vercel to access your GitHub account, it will even create the GitHub repository for you and automatically link it to your Vercel project and enable Vercel <> GitHub integration (automated CI/CD).
49+
**[Though, beware this](#deploying-through-vercel--github-cicd-official-way-not-recommended).**
5050

51-
_Live Example: [https://next-typescript-api-zeit-boilerplate.unly.now.sh/](https://next-typescript-api-zeit-boilerplate.unly.now.sh/)_
51+
_Live Example: [https://next-typescript-api-vercel-boilerplate.unly.now.sh/](https://next-typescript-api-vercel-boilerplate.unly.now.sh/)_
5252

5353
**Play around with the API:**
54-
- [`/status` with metadata](https://next-typescript-api-zeit-boilerplate.unly.now.sh/api/status)
55-
- [`/date` used by the frontend](https://next-typescript-api-zeit-boilerplate.unly.now.sh/api/date)
56-
- [`/error` to test your Sentry integration](https://next-typescript-api-zeit-boilerplate.unly.now.sh/api/error)
54+
- [`/status` with metadata](https://next-typescript-api-vercel-boilerplate.unly.now.sh/api/status)
55+
- [`/date` used by the frontend](https://next-typescript-api-vercel-boilerplate.unly.now.sh/api/date)
56+
- [`/error` to test your Sentry integration](https://next-typescript-api-vercel-boilerplate.unly.now.sh/api/error)
5757

5858

5959
## TODO (after generating a project from this boilerplate)
6060

61-
- Duplicate `.env.build.example` into `.env.build`
62-
- Define your `SENTRY_DSN` in `.env.build`, if not set then errors won't be sent to Sentry (but the app will run fine) - See [Configuring secret SENTRY_DSN in Zeit](#configuring-secret-sentry_dsn-in-zeit)
61+
- Duplicate `.env.local.example` into `.env.local`
62+
- Define your `SENTRY_DSN` in `.env.local`, if not set then errors won't be sent to Sentry (but the app will run fine) - See [Configuring secret SENTRY_DSN in Vercel](#configuring-secret-sentry_dsn-in-vercel)
6363

6464
## Getting started
6565

@@ -81,39 +81,39 @@ Go to [`http://localhost:9999`](http://localhost:9999) once running.
8181

8282
## Deploying From Your Terminal
8383

84-
You can deploy your new Next.js project with a single command from your terminal using [Now CLI](https://zeit.co/download):
84+
You can deploy your new Next.js project with a single command from your terminal using [Now CLI](https://vercel.com/download):
8585

8686
```shell
87-
yarn deploy # Deploy a staging/preview deployment (use now.staging.json)
88-
yarn deploy:production # Deploy a production deployment (use now.production.json)
87+
yarn deploy # Deploy a staging/preview deployment (use vercel.staging.json)
88+
yarn deploy:production # Deploy a production deployment (use vercel.production.json)
8989
```
9090

9191
---
9292

93-
## Deploying through Zeit <> GitHub CI/CD (official way, not recommended)
93+
## Deploying through Vercel <> GitHub CI/CD (official way, not recommended)
9494

95-
If you link your GitHub repository to a Zeit project, you'll benefit from automated CI/CD.
95+
If you link your GitHub repository to a Vercel project, you'll benefit from automated CI/CD.
9696

9797
Every time you push something to the GitHub remote, it'll get deployed.
9898

9999
> **N.B: Be careful about when you merge a branch into the `master` branch though, as it will automatically deploy the `now.staging.json` configuration and not the production!**
100100
101-
Due to this reason, we recommend to disable the GitHub integration for your Zeit project, **if you need to deploy a different configuration based on the stage**.
102-
Zeit Now does not allow any kind of configuration to customise this behaviour at this time, it will therefore always deploy CI/CD using the `now.json` configuration **(which is a symbolic link to `now.staging.json`)**
101+
Due to this reason, we recommend to disable the GitHub integration for your Vercel project, **if you need to deploy a different configuration based on the stage**.
102+
Vercel does not allow any kind of configuration to customise this behaviour at this time, it will therefore always deploy CI/CD using the `now.json` configuration **(which is a symbolic link to `now.staging.json`)**
103103

104-
## Deploying through Zeit <> GitHub Actions CI/CD (our way)
104+
## Deploying through Vercel <> GitHub Actions CI/CD (our way)
105105

106-
> Because we believe only very simple projects/POC can rely on the same staging/production configuration, we've built our own Zeit <> GitHub Actions integration.
106+
> Because we believe only very simple projects/POC can rely on the same staging/production configuration, we've built our own Vercel <> GitHub Actions integration.
107107
108108
And we encourage you to rather take advantage of [it](./.github/workflows).
109109

110110
To make it work, you need to:
111-
- Disable Zeit <> GitHub integration (just opt-out from it from your Zeit project's page)
112-
- Generate a Zeit personal token and add it to GitHub secrets
113-
1. Go to your **[personal settings](https://zeit.co/account/tokens)** *(not your team's!)*
111+
- Disable Vercel <> GitHub integration (just opt-out from it from your Vercel project's page)
112+
- Generate a Vercel personal token and add it to GitHub secrets
113+
1. Go to your **[personal settings](https://vercel.com/account/tokens)** *(not your team's!)*
114114
1. Create a new token, I usually name it `GitHub Actions`
115115
1. Go to your GitHub project's settings page then `Secrets`, would be `https://github.com/UnlyEd/boilerplates-generator/settings/secrets` for this project
116-
1. Add the new secret, named `ZEIT_TOKEN` (the same as the one in your)
116+
1. Add the new secret, named `VERCEL_TOKEN` (the same as the one in your)
117117

118118
---
119119

@@ -143,7 +143,7 @@ yarn test:coverage
143143

144144
This boilerplate comes with a Code Climate [configuration](.codeclimate.yml). We recommend using it for OSS projects, as it's free in this case.
145145

146-
You will need to manually [register your project to Code Climate](https://codeclimate.com/dashboard) (Quality, not Velocity), until then it'll have no effect.
146+
You will need to manually [register your project to Code Climate](https://codeclimate.com/dashboard) (Quality, not Velocity), until then it'll have no effect.
147147

148148
There are many things CC does for you, one of them is check that the license you use are OSS, for instance. (kinda handy, even if it gets mistaken sometimes)
149149

@@ -152,7 +152,7 @@ There are many things CC does for you, one of them is check that the license you
152152

153153
## EsLint
154154

155-
This boilerplate comes with an ESLint [configuration](.eslintrc.yml). Feel free to change the rules at your convenience,
155+
This boilerplate comes with an ESLint [configuration](.eslintrc.yml). Feel free to change the rules at your convenience,
156156
but it was difficult to make it work with TypeScript so we recommend keeping it around even if you don't use it immediately.
157157

158158
```
@@ -175,18 +175,18 @@ We usually link Sentry to our Slack channels to get notifications in real time a
175175

176176
Feel free to replace it by another similar tooling of your choice!
177177

178-
You'll need to provide your `SENTRY_DSN` in `.env.build` file. You can get it at https://sentry.io/settings/unly/projects/YOUR_PROJECT/keys/
178+
You'll need to provide your `SENTRY_DSN` in `.env.local` file. You can get it at https://sentry.io/settings/unly/projects/YOUR_PROJECT/keys/
179179

180-
### Configuring secret SENTRY_DSN in Zeit
180+
### Configuring secret SENTRY_DSN in Vercel
181181

182-
In order to allow Zeit to access your SENTRY_DSN sensitive key, we use [Now secrets](https://zeit.co/docs/v2/environment-variables-and-secrets).
182+
In order to allow Vercel to access your SENTRY_DSN sensitive key, we use [Now secrets](https://vercel.com/docs/v2/environment-variables-and-secrets).
183183

184-
- `now secrets add ntazb-sentry-dsn YOUR_DSN`
184+
- `vercel secrets add ntazb-sentry-dsn YOUR_DSN`
185185

186-
This ensures this secret is not git-tracked if you consider it's too sensitive.
186+
This ensures this secret is not git-tracked if you consider it's too sensitive.
187187
We recommend using secrets for all sensitive information.
188188

189-
**N.B**: You still need to have it in your `.env.build` file for local development. _(yeah, that sucks)_
189+
**N.B**: You still need to have it in your `.env.local` file for local development. _(yeah, that sucks)_
190190

191191
# Vulnerability disclosure
192192

@@ -203,11 +203,11 @@ This project is being maintained by:
203203

204204
# **[ABOUT UNLY]** <a href="https://unly.org"><img src="https://storage.googleapis.com/unly/images/ICON_UNLY.png" height="40" align="right" alt="Unly logo" title="Unly logo" /></a>
205205

206-
> [Unly](https://unly.org) is a socially responsible company, fighting inequality and facilitating access to higher education.
207-
> Unly is committed to making education more inclusive, through responsible funding for students.
208-
We provide technological solutions to help students find the necessary funding for their studies.
206+
> [Unly](https://unly.org) is a socially responsible company, fighting inequality and facilitating access to higher education.
207+
> Unly is committed to making education more inclusive, through responsible funding for students.
208+
We provide technological solutions to help students find the necessary funding for their studies.
209209

210-
We proudly participate in many TechForGood initiatives. To support and learn more about our actions to make education accessible, visit :
210+
We proudly participate in many TechForGood initiatives. To support and learn more about our actions to make education accessible, visit :
211211
- https://twitter.com/UnlyEd
212212
- https://www.facebook.com/UnlyEd/
213213
- https://www.linkedin.com/company/unly

0 commit comments

Comments
 (0)