create a next.js project#

This guide shows you how to create a Next.js project that builds in Tinka’s CI, and runs on Tinka’s platform.

Create a repository#

Refer to Building a new service for the guide on creating a new repository.

Assign these workflows to your Next.js repository:

  • semgrep

  • build-blaze-container-nextjs

  • release-please

Example: TinkaTech/github-provisioning

Setup the app#

The first step is to make sure the app runs on your machine, so you can work on it. This section shows you how to create an initial setup.

  1. Follow Next.js’s guide

  2. Setup TailwindCSS

  3. Pin Node version with volta pin

To test if the app is successfully created so far, try start the development environment by npx next.

Setup the CI#

After having a simple setup that runs on your machine, it is time to make it build in the CI.

Add essential scripts in package.json#

The CI tries to trigger Your scripts section in the package.json file should have the following scripts:

  "scripts": {
    "dev": "next",                   // for development
    "build": "next build",           // for the CI to trigger the build
    "start": "next start -p 5000",   // for the platform to run the image
    "lint": "next lint",             // for the CI to check your code with a linter
    "test": "jest"                   // for the CI to test your code with a tester
  },

Add a .nvmrc file#

The CI needs a .nvmrc to select the right Node.js version during the build step. Note it is not .npmrc, but .nvmrc.

Create the .nvmrc file and write the version pinned with Volta.

(Example)

Add a Dockerfile file#

Create a file at the root of your repo named as Dockerfile.

You can copy the content of this example, but you must make the following modifications:

  • Change the ID: blaze.service.id The ID must be unique. Because it will be used as the sub-domain of your website. For example, if the ID is xyz then your website will be accessible at xyz.tinka.nl and xyz.tinka.com

  • Change the name: blaze.service.name The Name must be unique. It is used in the internal network of microservices. If it is named as pineapple-cake, the other services can reach it via http://pineapple-cake.blaze inside the platorm (not publicly accessible).

To verify the setup, push the above additions to the repository on GitHub and see if the CI successfully runs all the workflows and upload an image to our registry. It is recommended to commit above in a Pull Request, where the workflow will reply in your PR if the build is successful.

Get Support#

Slack: #tech, #frontenders

It is quite complicated to choose the right framework, set up the repository, and make your code builds and runs smoothly. For instance, Next.js is our recommended framework, but it could potentially be an overkill for a barebone static site.

You can share and discuss everything around front-end development on the Slack channel #frontenders

Creating a website also means creating a user-friendly human-computer interface. For such design-related matters, you can reach the designers as well as the UI library maintainer on the Slack channel #design