Bootstrapping SaaS business from Zero to Profitable is hard. You have to pay for every single must-have service like web analytics before earning a buck.

Wait, maybe you will think, why not using Google Analytics? It's free. But let face it, if you're not paying for it. You're the product of Google.

Today, I will show you how to self-hosted Ackee (Open-source web analytics) on Vercel for tracking your nextjs app.

1. Setup MongoDB Altas

As Ackee requires MongoDB for storing the analytic data, let go to MongoDB Altas site and create MongoDB from there. After that, record down your connection string. We will use it to setup ackee on Vercel later.

2. Deploy Ackee to Vercel

[Deploy](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Felecterious%2FAckee&env=ACKEE_USERNAME,ACKEE_PASSWORD,ACKEE_MONGODB,ACKEE_ALLOW_ORIGIN&envDescription=Environment%20variables%20needed%20to%20configure%20the%20user%20and%20database%20connection&envLink=https%3A%2F%2Fgithub.com%2Felecterious%2FAckee%2Fblob%2Fmaster%2Fdocs%2FOptions.md)

When prompted to select a directory, select the root directory.

3. Configure Ackee

- Set the build command: `yarn build`
- Set the output directory: `dist`
- Set environment variables: `ACKEE_USERNAME`, `ACKEE_PASSWORD`, `ACKEE_MONGODB` and `ACKEE_ALLOW_ORIGIN`

4. Login to Ackee

- Go to the newly created site and log in with your user and password specified from the environment before.
- Go to Settings > New domain and grab the embed code.

5. Integrate to Nextjs

Install npm package `useAckee` in your nextjs app

```bash
yarn add use-ackee
```

Inside `_document.tsx`, put the embed code inside head tag.

```javascript
<Head>
...
<script
	async
	src="https://analytics.your.app/tracker.js"
	data-ackee-server="https://analytics.your.app"
	data-ackee-domain-id="your-domain-id">
</script>
</Head>
```

Inside `_app.tsx`, add the following useEffect hook

```javascript
function App ({ Component, pageProps }: AppProps) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      useAckee(url, {
        server: 'https://your.app',
        domainId: 'your-domain-id'
      }, {
        detailed: false,
        ignoreLocalhost: true,
        ignoreOwnVisits: true
      })      
    }
      router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
        router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])
}
```

Replace the `server` and `domain id` with your setting.

After this, you now have free web analytics without worry about privacy concerns.

As the JS developer, your machine may already have many dev tools like nodejs, nvm, PostgreSQL, and so on. 
But let face it, if you have a new machine or have a new teammate join the projects, it's still quite time-consuming to set up a local development environment from scratch without spending a half-day. Lucky we can leverage container to set up the local development environment with the following benefits:

- Able to run on any OS, Mac, Windows, and Linux.
- Save time to set up a local development environment.
- Easy to create a container with a specific node version.

Assume you already have docker desktop installed. If not, let [download](https://www.docker.com/products/docker-desktop) and install it before moving on.

## Dockerising Nextjs with Dockerfile

Create Dockerfile inside your nextjs root folder

```dockerfile
FROM node:current-alpine
WORKDIR /base
COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 3000
```

- **FROM node:current-alpine** - Use `node:current-alpine` as the base image.
- **WORKDIR /base** - Specify base folder inside container as working directory.
- **COPY package*.json ./** - Copy package.json and package-lock.json from host machine to container root folder.
- **RUN npm install** - Run `npm install` in the container.
- **COPY . .** - Copy all files from host to the container working directory.

## Bring up Nextjs and PostgreSQL services with docker compose

Create docker-compose.yml inside your nextjs root folder

```dockerfile
version: '3'

services:
  npm:
    build: ./
    working_dir: /base
    volumes:
      - .:/base
      - app_node_modules:/base/node_modules
    entrypoint: npm
  dev:
    build: ./
    working_dir: /base
    volumes:
      - .:/base
      - app_node_modules:/base/node_modules
    ports:
      - "3000:3000"
    networks:
      - app_network
    depends_on:
      - postgres
    command: npm run dev
  postgres:
    image: 'postgres:13'
    ports:
      - '${FORWARD_DB_PORT:-5432}:5432'
    environment:
      PGPASSWORD: '${DB_PASSWORD:-secret}'
      POSTGRES_DB: '${DB_DATABASE}'
      POSTGRES_USER: '${DB_USERNAME}'
      POSTGRES_PASSWORD: '${DB_PASSWORD:-secret}'
    volumes:
      - 'app_db_data:/var/lib/postgresql/data'
    networks:
      - app_network
    healthcheck:
      test: ["CMD", "pg_isready", "-q", "-d", "${DB_DATABASE}", "-U", "${DB_USERNAME}"]
networks:
  app_network:
    driver: bridge
volumes:
  app_node_modules:
  app_db_data:
    driver: local
```

- **version: '3'** - Indicate which docker engine version using. E.g 3 mean using docker engine 1.13.0+. For more info, visit [Compose file version 3 reference](https://docs.docker.com/compose/compose-file/compose-file-v3/).
- **services** - Specify the container services you want to compose. For our case, we have three services `npm`, `dev`, and `postgres`.

### npm service

- **build: ./** - Specify the current root folder as directory for build the docker image.
- **working_dir: /base** - Specify base folder inside container as working directory.
- **entrypoint: npm** - Allow us to execute npm command inside the container with syntax like `docker-compose run npm install`

#### volumes

- **.:/base**: Mapping current host folder to container working directory.
- **app_node_modules:/base/node_modules** - Mapping app_node_modules volume to container `/base/node_modules` folder

### dev service

- **build: ./** - Specify the current root folder as directory for build the docker image.
- **working_dir: /base** - Specify base folder inside container as working directory.
- **.:/base**: Mapping current host folder to container working directory.
- **app_node_modules:/base/node_modules** - Mapping app_node_modules volume to container `/base/node_modules` folder.
- **command: npm run dev** - Default command to run when container start.

#### ports

- **3000:3000** - Mapping the host port 3000 to container port 3000.

#### networks

- **app_network** - Specify which network to use. In this case, we use `app_network`

#### depends_on

- **postgres** - This container will only start after postgres start.

### postgres service

- **image: 'postgres:13'** - We will use postgres:13 the base image.

#### ports

- **${FORWARD_DB_PORT:-5432}:5432** - If FORWARD_DB_PORT environment variable exist, it will mapping that FORWARD_DB_PORT from host to container port 5432. Otherwise, it will mapping host port 5432 to container port 5432

#### environment

- **PGPASSWORD: '${DB_PASSWORD:-secret}'** - If DB_PASSWORD environment variable exist, it will be used for db password, otherwisw it will use secret as the db password.
- **POSTGRES_DB: '${DB_DATABASE}'** - If DB_DATABASE environment variable exist, it will be used for db database name.
- **POSTGRES_USER: '${DB_USERNAME}'** - If DB_USERNAME environment variable exist, it will be used for db username.
- **POSTGRES_PASSWORD: '${DB_PASSWORD:-secret}'** - If DB_PASSWORD environment variable exist, it will be used for db password, otherwisw it will use secret as the db password.

#### volumes

- **.:/base**: Mapping current host folder to container working directory.
- **app_db_data:/var/lib/postgresql/data** - Mapping app_db_data volume to container `/var/lib/postgresql/data` folder

#### networks

- **app_network** - Specify which network to use. In this case, we use `app_network`

#### healthcheck
- **test: ["CMD", "pg_isready", "-q", "-d", "${DB_DATABASE}", "-U", "${DB_USERNAME}"]** - Command to check this container is healthy.

## networks

We specify the network name as `app_network` with bridge network.

## volumes

We defined two volumes

- **app_node_modules** - For storing node modules packages.
- **app_db_data** - For storing postgresql data.

Finally, run the following command to start your nextjs and postgresql in container:

```bash
docker-compose up
```

## Useful docker-compose commands

### build the docker container

```bash
docker-compose build
```

### start the docker container

```bash
docker-compose up
```

### remove all docker containers in the repository

```bash
docker-compose down
```

Today, we offer a 90% discount for the best Next.js boilerplate at the lowest price ever.

Whether you are the entrepreneurs, makers, or react developers, you can save massive time with this boilerplate to build your SaaS business.

Use the Coupon Code **MASSIVE90OFF** to get 90% off.

[Get it now](https://kickstart.app)


Get the best Next.js boilerplate at the lowest price ever!

One of the benefits of State Site Generation is that we can keep our site static generated at build time and put all site files distributed to global edge CDN. The result is a fast, reliable, and safe browsing experience.

However, suppose we need to fetch the dynamic data frequently, and the data source didn't provide any webhook mechanism to rebuild the site. In that case, we need to rebuild the site for every data update manually. It will be tedious tasks to do so.

To enjoy both worlds, static site generation, and dynamic data fetching without manual site rebuild. Next.js has introduced - Incremental Static Generation feature.

All you need to do is add the revalidate inside getStaticProps return

```javascript
export async function getStaticProps () {
  return {
    props: await getDataFromCMS(),
    // we will attempt to re-generate the page:
    // - when a request comes in
    // - at most once every second
    revalidate: 1
  }
} 
```

To showcase this great feature, the next.js team has created an example [https://reactions-demo.now.sh/](https://reactions-demo.now.sh/)

![Demo](https://images.prismic.io/kickstartapp/dd1ed6c0-8011-41f2-b8e7-6c5a915a7f9c_demo.gif?auto=compress,format)

By updating the reaction in GitHub, the next app will revalidate and rebuild the page in no time!

Next.js 9.5 - Stable Incremental Static Regeneration

Kickstart Blog

Web analytics with Ackee on Vercel

Web analytics with Ackee on Vercel

More Stories

Local Development with Docker Compose

Local Development with Docker Compose

Get the best Next.js boilerplate at the lowest price ever!

Get the best Next.js boilerplate at the lowest price ever!

Next.js 9.5 - Stable Incremental Static Regeneration

Next.js 9.5 - Stable Incremental Static Regeneration

.css-1pmdrjf{line-height:1;}@media screen and (min-width:30em){.css-1pmdrjf{line-height:1.1;}}@media screen and (min-width:48em){.css-1pmdrjf{line-height:1.2;}}@media screen and (min-width:62em){.css-1pmdrjf{line-height:1.2;}}Kickstart Blog

Web analytics with Ackee on Vercel

More Stories

Local Development with Docker Compose

Local Development with Docker Compose

Get the best Next.js boilerplate at the lowest price ever!

Get the best Next.js boilerplate at the lowest price ever!

Next.js 9.5 - Stable Incremental Static Regeneration

Next.js 9.5 - Stable Incremental Static Regeneration

Kickstart Blog