# 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](/how-to-guides/services#github) for the guide on creating a new repository.

Assign these workflows to your Next.js repository:

- semgrep
- build-blaze-container-nextjs
- release-please

Example: <https://github.com/TinkaTech/github-provisioning/blob/master/terraform/repo.blaze-tinka-public-site.tf>

## 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](https://nextjs.org/docs/getting-started#automatic-setup)
2. Setup [TailwindCSS](https://design.tinka.tools/develop/quick-start/nextjs)
3. [Pin Node version with `volta pin`](https://docs.volta.sh/guide/understanding#managing-your-project)

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:

```json
  "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](https://github.com/TinkaTech/blaze-tinka-public-site/blob/master/.nvmrc))

### Add a `Dockerfile` file

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

You can copy the content of [this example](https://github.com/TinkaTech/blaze-tinka-public-site/blob/master/Dockerfile), 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`