This is a really simple project that shows the usage of Semantic Release with Next.js
You can find the original article here
In this guide you'll learn how to setup Semantic Release for a React app or a Next.js app.
This will allow you to follow a workflow that performs fully automated releases for Github and enforces the Semantic Versioning specification based on your commit messages.
Here is an example from the official documentation of the release type that will be done based on commit messages:
Commit message | Release type |
---|---|
fix(pencil): stop graphite breaking when too much pressure applied |
Patch Release |
feat(pencil): add 'graphiteWidth' option |
|
perf(pencil): remove graphiteWidth option BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reasons. |
Tools such as commitizen or commitlint can be used to enforce valid commit messages.
You can use the commitizen extension to add commitizen support to Visual Studio Code.
First, create a Next.js app using Create Next App:
npx create-next-app semantic-release --example with-typescript --use-npm
Or if you prefer to use only React, use Create React App and run:
npx create-react-app semantic-release --template typescript --use-npm
In this example I called it: semantic-release
git remote add origin git@github.com:<username>/<repository-name>.git
git push -u origin master
A Github token must be created in order for Semantic Release to be able to publish a new release to the Github repository.
You can read here how to create a token for Github. You need to give the token repo scope permissions.
Once you have the token, you have to save it in your repository secrets config:
https://github.com/<username>/<repositoryname>/settings/secrets
Use GH_TOKEN
as the secret name.
npm install --save-dev @semantic-release/git @semantic-release/changelog
These plugins are necessary in order to create a Changelog and publish the new release in Github.
Add the following config to your package.json:
"private": true,
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/changelog",
"@semantic-release/github",
"@semantic-release/npm",
"@semantic-release/git"
],
"release": {
"prepare": [
"@semantic-release/changelog",
"@semantic-release/npm",
{
"path": "@semantic-release/git",
"assets": [
"package.json",
"package-lock.json",
"CHANGELOG.md"
],
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
}
]
}
When you set the private
property to true, it skips the publication to the NPM repository, which in this case we don't want to do.
Github Actions will be used to create new releases of your app.
You must store workflows in the .github/workflows
directory in the root of your repository. Once you created the directories, add a main.yml
file inside with the following config:
name: Semantic release
on:
push:
branches:
- master
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: 12
- name: Install dependencies
run: npm install
- name: Build app
run: npm run build
- name: Semantic release
env:
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
run: npx semantic-release
Use the following commands:
git commit -m "feat: Add Semantic Release and Github Actions"
git push
Congratulations!
If you followed these steps, you should now have triggered Github Actions:
Also, if you check the release tab in your repository, you'll also see your first published release:
And finally, a Changelog file should have been automatically generated and published: