DEV Community: Diego Segura

I Built an Enterprise-Grade VPN with Terraform. It's Also My Ultimate "Life Hack" Tool.

Diego Segura — Sat, 25 Oct 2025 01:44:33 +0000

I originally created this project to solve a complex engineering problem: how to deploy a hardened, hybrid VPN (modern WireGuard® for users, classic IPsec for partners) on GCP, all managed as code. It's got a load balancer, health checks, a cost-saving scheduler, and zero secrets in git. It's built for production.

You can read the original, more corporate-focused article here.

But then I realized... a secure, high-performance VPN with a deploy-anywhere-in-the-world capability, managed by Terraform, is also the perfect tool for solving common "power user" problems.

Forget the slow, blacklisted servers of commercial VPNs. When you control the metal (or in this case, the VM), you control everything.

In this tutorial, I'll walk you through how to deploy my terraform-gcp-vpn project. I'll cover the core setup, and then I'll show you how to leverage this "enterprise-grade" stack for two of the most popular VPN use cases: geo-unblocking content and saving money on subscriptions.

🚀 What We're Building

This isn't just a single VM running a script. This Terraform setup deploys a complete, resilient architecture:

Firezone (WireGuard): A fantastic open-source UI and management portal for WireGuard. This is for your personal devices (phone, laptop).
strongSwan (IPsec): (Optional) The classic, battle-tested IPsec server for site-to-site tunnels. You can probably ignore this for personal use, but it's there.
GCP Load Balancer: Provides a stable, static IP and automatic health checks.
GCP Cloud Scheduler: This is a key component. It automatically starts and stops your VM on a schedule, so you're not paying for it 24/7.
GCP Secret Manager: All credentials (like IPsec PSKs) are stored securely, not in .tfvars files.
Hardened Security: Follows OpenSSF Scorecard recommendations, uses least-privilege IAM, and has a strict firewall.

✅ Prerequisites

This is a tutorial for a technical audience. You'll need:

A GCP Project with billing enabled.
Terraform v1.9+ installed locally.
gcloud CLI authenticated (gcloud auth application-default login).
A Service Account with the necessary roles (e.g., roles/compute.instanceAdmin.v1, roles/cloudscheduler.admin).
A domain name (e.g., vpn.yourdomain.com) you can point to the new IP.

🛠️ The Tutorial: Deploying Your Personal VPN Hub

Step 1: Clone and Configure

First, get the code and create your configuration file.

git clone [https://github.com/dieguezz/terraform-gcp-vpn.git](https://github.com/dieguezz/terraform-gcp-vpn.git)
cd terraform-gcp-vpn
cp terraform.tfvars.example terraform.tfvars

Now, open terraform.tfvars in your editor. This is where the magic happens. Let's look at the key variables.

# terraform.tfvars

project_id = "your-gcp-project-id"
region     = "us-central1"
zone       = "us-central1-a"

# --- Network ---
network_name = "vpn-network"
subnet_name  = "vpn-subnet"
subnet_cidr  = "10.128.0.0/20"

# --- Firezone ---
firezone_hostname = "vpn.yourdomain.com"
# ... other firezone vars like admin email

# --- Scheduling ---
enable_scheduling = true
start_schedule    = "0 6 * * 1-5"  # 6am Mon-Fri
stop_schedule     = "0 23 * * 1-5" # 11pm Mon-Fri
timezone          = "America/New_York"

Step 2: The "Hacks" Are Just Variables

This is where this project gets powerful.

👉 For Geo-Unblocking (e.g., US Netflix)
Commercial VPNs get their IPs blocked by streaming services constantly. Your personal, fresh IP from GCP? Much less likely.

Want to access the US Netflix or Hulu library? Just set your region to a US-based one:

region = "us-central1" # or us-east1, us-west1, etc.
zone   = "us-central1-a"

Want to access BBC iPlayer?

region = "europe-west2" # London
zone   = "europe-west2-a"

You get the idea. You can deploy your VPN endpoint anywhere GCP has a presence.

👉 For Subscription Savings (e.g., YouTube Premium)
Services like YouTube Premium or Spotify often have different pricing based on your country. (Disclaimer: This may be against their ToS, so proceed at your own risk).

Want to see if you can get a better price from another country? Just deploy your VPN there. For example, some users report savings by connecting from regions in South America or Asia.

The power of Terraform means you can terraform destroy this instance and spin one up in us-central1 30 seconds later. You have a global fleet of personal VPNs at your fingertips.

👉 For Saving Money (The Scheduler)
A production-grade setup like this isn't free (see cost breakdown below). The e2-medium instance and the Load Balancer are the main costs.

But do you really need your streaming VPN running at 3 AM on a Tuesday?

By setting enable_scheduling = true, you can configure the VM to only run when you'll actually use it. For example, to only run it on evenings and weekends:

enable_scheduling = true
start_schedule    = "0 18 * * 1-5" # 6 PM on Weekdays
stop_schedule     = "0 23 * * 1-5" # 11 PM on Weekdays
# Note: You'd need more rules for weekends, or just run it manually.
timezone          = "Europe/Madrid"

This single variable can cut your VM costs by 50-80%, turning an expensive setup into something that's a few bucks a month.

Or, my favorite method:

enable_scheduling = false

...and I just manually run terraform apply when I want to stream, and terraform destroy when I'm done. The entire deployment takes about 5 minutes.

Step 3: Deploy!

Once your terraform.tfvars file is saved, the rest is standard Terraform.

# Initialize the modules
terraform init

# See what's about to be built
terraform plan

# Deploy the infrastructure
terraform apply

Type yes when prompted. Go grab a coffee. In about 5 minutes, Terraform will finish and spit out the outputs.

Outputs:

firezone_url     = "[https://vpn.yourdomain.com](https://vpn.yourdomain.com)"
load_balancer_ip = "35.xxx.xxx.xxx"
vpn_instance_name = "firezone-vpn-instance"

Step 4: Access Your VPN Hub

Point Your DNS: Go to your DNS provider and create an A record for vpn.yourdomain.com (or whatever you set as firezone_hostname) pointing to the load_balancer_ip.
Wait: Give Firezone 2-3 minutes to initialize on the first boot. You can check the logs with gcloud compute instances get-serial-port-output firezone-vpn-instance.
Login: Open https://vpn.yourdomain.com in your browser.
Enroll Devices: Use the Firezone UI to add your users (just you, probably) and enroll your devices. You can download the WireGuard config or scan a QR code with the mobile app.

That's it. You are now connected to the internet through your own private, secure, high-speed server.

🔒 A Note on Security and Privacy

The #1 reason to do this is privacy.

Zero Logs: Is your commercial VPN really "zero-log"? You have to trust them. Here, you own the server. You know there are no logs because you'd have to be the one to set them up.

Hardened: This deployment follows OpenSSF Scorecard recommendations. No secrets in code, pinned dependencies, encrypted boot disk, and least-privilege IAM.

Public Wi-Fi: Using this on a coffee shop or airport Wi-Fi means your traffic is encrypted inside a WireGuard tunnel to your server. No one on the local network can snoop on you.

Conclusion

Building your own VPN used to be a pain. With tools like Terraform and Firezone, it's now a 5-minute process.

While I built this repo for corporate use, its real power comes from its flexibility. You get an enterprise-grade stack that you can use to stream Netflix, save money on YouTube, or simply secure your traffic at a coffee shop—all with a few changes to a .tfvars file.

You're a developer. Stop renting your infrastructure. Own it.

If this helped you, I'd appreciate a ⭐ on the GitHub repo!

GitHub Repo: dieguezz/terraform-gcp-vpn

How to Deploy a Hardened Firezone (WireGuard) + Classic IPsec VPN on Google Cloud with Terraform 🚀

Diego Segura — Wed, 22 Oct 2025 02:23:03 +0000

Why This Baseline Helps 💡

If you're managing remote access for a distributed team and need site-to-site connectivity with partners running legacy IPsec, you've probably felt the pain of maintaining two separate VPN stacks. One modern (WireGuard via Firezone), one classic (strongSwan/Libreswan), both fighting for the same public IP and firewall rules.

This guide walks you through a single Terraform deployment that gives you:

Two access patterns, one deployment: WireGuard for your remote users, Classic IPsec for partner networks.
Zero secrets in git: All credentials live in GCP Secret Manager, referenced via data sources.
Production-ready from day one: Load balancer health checks, automated backups, OpenSSF Scorecard hardening, and cost-saving VM schedulers.

By the end, you'll have a working VPN gateway on GCP that your team can connect to via the Firezone mobile/desktop clients, while your partners connect via standard IPsec tunnels—all managed as code.

What You're Building 🏗️

Here's the architecture at a glance:

Component	Purpose	Key Features
Firezone	Modern WireGuard VPN with web UI	User management, device enrollment, audit logs
strongSwan (optional)	Classic IPsec for site-to-site tunnels	Partner compatibility, IKEv2/ESP support
GCP Load Balancer	Health-checked traffic routing	Automatic failover, regional redundancy
Cloud Scheduler	Cost optimization	Auto-start 6am, auto-stop 11pm (configurable)
Secret Manager	Credential storage	Zero plaintext secrets in code

Prerequisites Checklist ✅

Before you start, make sure you have:

GCP Project with billing enabled
Terraform v1.9+ installed locally
gcloud CLI authenticated (gcloud auth application-default login)
Service Account with roles:
- roles/compute.instanceAdmin.v1
- roles/cloudscheduler.admin

Note: If you plan to enable site-to-site VPN tunnels, you'll also need to create secrets in GCP Secret Manager for the IPsec pre-shared keys (format: vpn-psk-{tunnel_name}). See the VPN Gateway module documentation for details.

Step 1: Clone and Configure 📦

git clone https://github.com/dieguezz/terraform-gcp-vpn.git
cd terraform-gcp-vpn
cp terraform.tfvars.example terraform.tfvars

Edit terraform.tfvars with your values:

project_id = "your-gcp-project-id"
region     = "us-central1"
zone       = "us-central1-a"

# Network
network_name    = "vpn-network"
subnet_name     = "vpn-subnet"
subnet_cidr     = "10.128.0.0/20"

# Firezone
firezone_hostname = "vpn.yourdomain.com"

# Scheduling (optional, remove to run 24/7)
enable_scheduling = true
start_schedule    = "0 6 * * 1-5"  # 6am Mon-Fri
stop_schedule     = "0 23 * * 1-5" # 11pm Mon-Fri
timezone          = "America/New_York"

Step 2: Initialize Terraform 🔧

terraform init

You'll see modules downloading:

Initializing modules...
- compute in modules/compute
- load_balancer in modules/load-balancer
- network in modules/network
- scheduler in modules/scheduler
- security in modules/security
- vpn_gateway in modules/vpn-gateway

Step 3: Review the Plan 👀

terraform plan

Terraform will show you what's about to be created. Pay attention to:

Compute Engine instance (e2-medium with 50GB boot disk)
VPC network and subnet with firewall rules for UDP 51820, 500, 4500
Load balancer with health check on Firezone port 13000
Cloud Functions for start/stop scheduling (if enable_scheduling = true)
IAM bindings for Secret Manager access

Step 4: Deploy 🚢

terraform apply

Type yes when prompted. The deployment takes ~5 minutes. Coffee break time ☕

Step 5: Access Firezone 🌐

Once complete, Terraform outputs the load balancer IP:

Outputs:

firezone_url = "https://35.xxx.xxx.xxx"
load_balancer_ip = "35.xxx.xxx.xxx"
vpn_instance_name = "firezone-vpn-instance"

Point your DNS: Create an A record for vpn.yourdomain.com → 35.xxx.xxx.xxx
Wait 2-3 minutes for Firezone to initialize (check startup script logs with gcloud compute instances get-serial-port-output)
Open browser: Navigate to https://vpn.yourdomain.com
Login: Use your Google Workspace credentials (configured via firezone_admin_email and google_workspace_domain variables)
Enroll devices: Add users, generate WireGuard configs via the Firezone UI

Step 6: Site-to-Site VPN (Optional) 🔗

This deployment also supports Classic IPsec tunnels for connecting with partner networks or legacy infrastructure. This is completely optional and disabled by default.

If you need this capability, the infrastructure includes a pre-configured strongSwan setup. To enable it:

Set enable_site_to_site_vpn = true in your terraform.tfvars
Configure your tunnel parameters in the vpn_tunnels variable
Create the required pre-shared keys in Secret Manager

For detailed configuration steps, see the VPN Gateway Module Documentation which includes complete examples and troubleshooting guides.

Security Hardening Applied 🔒

This deployment follows OpenSSF Scorecard recommendations:

✅ No secrets in code – all credentials in Secret Manager
✅ Pinned dependencies – GitHub Actions use SHA hashes
✅ SAST enabled – CodeQL scans on every PR
✅ Least-privilege IAM – service account has minimal roles
✅ Encrypted boot disk – GCP default encryption at rest
✅ Regular backups – VM snapshots via Cloud Scheduler (roadmap item)

Cost Breakdown (Monthly Estimate) 💰

Resource	Type	Cost (USD/month)
Compute Engine	e2-medium (50% usage with scheduler)	~$12
Load Balancer	Network LB with health checks	~$18
VPC	Egress traffic (10GB assumed)	~$1
Secret Manager	4 secrets, 10 accesses/day	<$1
Cloud Scheduler	2 jobs (start/stop)	Free tier
Total		~$32/month

Savings: Without the scheduler (24/7 runtime), the e2-medium costs ~$24/month. The scheduler saves you ~$12/month (50% reduction).

Troubleshooting 🔍

Symptom	Likely Cause	Fix
`terraform apply` fails with "secret not found"	VPN tunnel enabled but PSK secret missing	Create secret: `gcloud secrets create vpn-psk-{tunnel_name}` or disable site-to-site VPN
Can't access Firezone UI after 5 min	Startup script still running	Check `gcloud compute instances get-serial-port-output` for errors
WireGuard clients can't connect	Firewall rules not applied	Verify `gcloud compute firewall-rules list` includes `allow-wireguard`
Google Workspace SSO not working	Domain mismatch or OAuth misconfigured	Verify `google_workspace_domain` matches your workspace and check Firezone OAuth settings
Instance stops unexpectedly	Scheduler enabled but wrong timezone	Verify `timezone` variable in `terraform.tfvars`

What's Next? 🎯

Now that you have a working baseline:

Add users: Use the Firezone web UI to invite team members and generate device configs
Monitor traffic: Enable VPC Flow Logs (gcloud compute networks subnets update --enable-flow-logs)
Automate backups: Extend the scheduler module to snapshot the boot disk weekly
Multi-region failover: Deploy a second instance in another region, use Cloud DNS routing
Audit logs: Forward Firezone logs to Cloud Logging for compliance

Key Takeaways 📝

Hybrid VPN stacks don't have to be messy. One Terraform deployment can handle both modern WireGuard and legacy IPsec.
Zero secrets in git is achievable. GCP Secret Manager + Terraform data sources = clean commit history.
Cost control matters. A simple scheduler can cut your VM bill in half for dev/staging environments.
Security is a journey. OpenSSF Scorecard gives you a roadmap—automated fixes get you 80% of the way.

Repository & Resources 📚

GitHub: dieguezz/terraform-gcp-vpn
Firezone Docs: firezone.dev/docs
strongSwan Wiki: strongswan.org
OpenSSF Scorecard: securityscorecards.dev

Got questions or want to share your VPN war stories? Drop a comment below or open an issue on GitHub. If this helped you, a ⭐ on the repo keeps me caffeinated for the next guide!

Next in series: Architecture Deep Dive – How the Modules Talk to Each Other (and Why It Matters) 🏛️

Creating a very simple blog with Next.js and Strapi

Diego Segura — Mon, 07 Sep 2020 01:04:46 +0000

Setup Strapi locally and deploy it to heroku
Data fetching strategies with Next.js
Create dynamic routes
Basic GraphQl
Static SSR
Deploy frontend to vercel

What you need first

Github account
Create a github account and generate a new ssh key. Then add it to your github account and you are ready.
Code editor
Heroku account

Create an account if you don't have one

I I installed it for Arch but you can google how to install it for your env

Rendering strategy

Check this out.

On this article i will focus on Static SSR strategy for this blog. I like it because it will fit in 90% use cases and i think its really performant.

Install Strapi with CLI

1. Login to Heroku from your CLI

Next, you need to login to Heroku from your computer.

heroku login

Follow the instructions and return to your command line.

2. Create a new Strapi project

yarn create strapi-app strapi-blog

When prompted, answer, on this order:

custom
postgres
my-blog-db

3. Init a Git repository and commit your project

Init the Git repository

cd my-project
git init

Add heroku remote

heroku git:remote -a blog-strapi-app

Your local development environment is now set-up and configured to work with Heroku. You have a new Strapi project and a new Heroku app ready to be configured to work with a database and with each other.

4. Heroku Database set-up

heroku addons:create heroku-postgresql:hobby-dev

5. Database credentials

The add-on automatically exposes the database credentials into a single environment variable accessible by your app. To retrieve it, type:

heroku config

This should print something like this: DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b.

(This url is read like so: postgres:// USERNAME : PASSWORD @ HOST : PORT : DATABASE_NAME)

6. Set environment variables

Strapi expects a variable for each database connection configuration (host, username, etc.). So, from the url above, you have to set several environment variables in the Heroku config:

heroku config:set DATABASE_USERNAME=ebitxebvixeeqd
heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf
heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com
heroku config:set DATABASE_PORT=5432
heroku config:set DATABASE_NAME=d516fp1u21ph7b

Replace these above values with your actual values.

7. Update your database config file.

Replace the contents of config/database.js with the following:

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: env('DATABASE_HOST', '127.0.0.1'),
        port: env.int('DATABASE_PORT', 27017),
        database: env('DATABASE_NAME', 'my-blog-db'),
        username: env('DATABASE_USERNAME', ''),
        password: env('DATABASE_PASSWORD', ''),
      },
      options: {
        ssl: false,
      },
    },
  },
});

8. Deploy.

git add --all
git commit -m "update config"
git push heroku master

The deployment may take a few minutes. At the end, logs will display the url of your project (e.g. https://mighty-taiga-80884.herokuapp.com). You can also open your project using the command line:

heroku open

If you see the Strapi Welcome page, you have correctly set-up, configured and deployed your Strapi project on Heroku. You will now need to set-up your

Frontend

1. Create our Next.js app

We move to the parent folder as we dont want to mix strapi and frontend files and we create our app

cd ..
yarn create next-app

2. Routing

We create a file pages/article/[id].js which will be our article item page:

import Head from "next/head";

export default function ArticlePage() {
  return (
    <div>
      <Head>
        <title>This is an article title</title>
      </Head>
      <main>
        This is an article body
      </main>

    </div>
  );
}

We empty the contents of pages/index.js as its our home page and it will contiain our ArticleList in the future.

import styles from "../styles/Home.module.scss";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Our great blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        The article list
      </main>
    </div>
  );
}

We create a 404 custom page by adding a pages/404.js with a PageNotFound component.

export default function PageNotFound() {
    return <div>oh oh...</div>
}

3. Create some structure

Create a modules folder at the root of our Next.js project
Create a modules/core module with two subfolders components and services.
Inside modules/core/components create a Header.js and a Footer.js files like:

import Link from "next/link";

export default function Header() {
  return (
    <header>
      <Link href="/">
        <a>Our awesome blog</a>
      </Link>
    </header>
  );
}

export default function Footer() {
  return <footer>® Awesome friends company</footer>;
}

Consume your components in app.js

import "../styles/globals.scss";
import Header from "../modules/core/components/Header";
import Footer from "../modules/core/components/Footer";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Header></Header>
      <div className="route">
        <Component {...pageProps} />
      </div>
      <Footer></Footer>
    </div>
  );
}

export default MyApp;

Remove the folder routes/api as we are not using microservices for our example, it will be fully static.
Install SASS (optional)
We are using sass because we want to be able of reusing variables for colors.

yarn add sass

Change all .css files to .scss (omit if you did not add sass)
Create a reset.scss file next to global.scss with your favourite css reset. (use .css if you didn't add sass)
Empty the contents of global.scss and import reset.scss like:

@import 'reset'

Create a file variables.scss next to global.scss and define your colors, breakpoints or whatever variables you need to share here. For our case, i picked a random palette from here

variables.scss

$charcoal: #264653;
$persianGreen: #2A9D8F;
$orangeYellowCrayola: #E9C46A;
$sandyBrown: #F4A261;
$burntSienna: #E76F51;

Empty the contents of Home.module.scss to leave it like

.container {
  display: block;
}

.main {
  display: block;
}

You can style it from here in the future.

Data fetching

Launch your strapi in local. For this, go to the folder where you installed strapi and type:

yarn develop

Log into your admin account in http://localhost:1337/admin

create an article content type and add the following fields:

canonical (will be our permalink or pathname)
description (long text)
title (short text)
body (rich text)

save everything and open the strapi folder in your text editor.

Create a schema.graphql.js inside api/article/config with the following:

const { sanitizeEntity } = require('strapi-utils');

module.exports = {
  query: `
    articleByCanonical(canonical: ID): Article
  `,
  resolver: {
    Query: {
      articleByCanonical: {
        resolverOf: 'Article.findOne',
        async resolver(_, { canonical }) {
          const entity = await strapi.services.article.findOne({ canonical });
          return sanitizeEntity(entity, { model: strapi.models.article });
        },
      },
    },
  },
};

And save everything.

Now, on your frontend project add the apollo client dependency (remember to cd frontend dir to install the dependency in the frontend package.json)

yarn add @apollo/client

Create a .env.local file with:

STRAPI_HOST="http://localhost:1337"

Create a service inside core/services/apolloClient.service.js where we will export our apollo client instance.

import { ApolloClient, InMemoryCache } from '@apollo/client'

export default new ApolloClient({
    uri: `${process.env.STRAPI_HOST}/graphql`,
    cache: new InMemoryCache()
})

Create a new module article with components and services folders as we did with core.

Create ArticleList and Article components inside article/components/ArticleList.js and article/components/Article.js with the following:

export default function Article({ title, body }) {
  return <div>
    <h1>{title}</h1>
    <div>{body}</div>
  </div>;
}

And

import Link from "next/link";

export default function ArticleList({ articles }) {
  return articles.length ? (
    <ol>
      {articles.map((article) => (
        <li key={article.id}>
          <Link href={`article/${article.canonical}`}>
            <h2>{article.title}</h2>
          </Link>
          <p>{article.description}...</p>
        </li>
      ))}
    </ol>
  ) : (
    <div>There are no articles</div>
  );
}

Create the articles service in article/services/article.service.js

import { gql } from "@apollo/client";
import apolloClient from "../../core/services/apolloClient.service";

export async function getAll() {
  return apolloClient
    .query({
      query: gql`
        {
          articles {
            canonical
            description
            id
            created_at
            title
          }
        }
      `,
    })
    .then((result) => result.data.articles);
}

export async function getByCanonical(canonical) {
  return apolloClient
    .query({
      query: gql`
        {
          articleByCanonical(canonical: "${canonical}") {
            title
            body
          }
        }
      `,
    })
    .then((result) => {
      console.log(result.data)
      return result.data.articleByCanonical;
    });
}

Finally, we add the fetching logic inside our routes and we consume these components:

pages/index.js

import Head from "next/head";
import ArticleList from "../modules/article/components/ArticleList";
import { getAll } from "../modules/article/services/article.service";

export default function HomePage({ articles }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Our great blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <ArticleList articles={articles}></ArticleList>
      </main>
    </div>
  );
}

export async function getStaticProps(context) {
  return {
    props: { articles: await getAll() },
  };
}

And change pages/article/[id].js

import marked from "marked";

import Article from "../../modules/article/components/Article";
import {
  getAll,
  getByCanonical,
} from "../../modules/article/services/article.service";
import Head from "next/head";

export default function ArticlePage({ article }) {
  return (
    <div>
      <Head>
        <title>{article.title}</title>
      </Head>
      <main>
        <Article {...article}></Article>
      </main>

    </div>
  );
}

export async function getStaticPaths() {
  const articles = await getAll();

  const paths = articles.map((article) => ({
    params: { id: article.canonical },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const article = await getByCanonical(params.id);

  return { props: { article } };
}

Add styles

You can create any file .module.scss next to your component and your css classes will be mapped to an object you can import like

// foo.module.scss
.container {
  display: block;
}

// foo.js
import styles from './foo.module.scss'

function Foo() {
  return <div className={styles.container}>My Foo styled component</div>
}

Deploy

For strapi deployment just go to your strapi project in a terminal and commit and push everything:

git add --all
git commit -m "my changes"
git push heroku master

For the frontend: frontend path and push your changes.
In package.json change the build command for next build && next export. This will generate a static build into /out folder. That's all we need to serve our site. To test it locally just run npx serve out/
Then create a github repo and add your remote
Then go to vercel.com and import your github project
Remember to add your STRAPI_HOST env variable in vercel to point to your heroku database
Follow the wizard and your app will be deployed

Updates

Create a webhook in vercel that will provide you an url
Log into your production strapi environment and in settings > webhooks create a new webhook with the provided url.
Now every time you update your production database your blog will be rebuilt and redeployed.

Demo and Code