Using Cloudflare Worker KV to Store Environment Variables

Why Use Cloudflare Worker KV?

Cloudflare Workers KV (Key-Value store) is a globally distributed storage system that allows you to store key-value pairs and access them with low latency. By using Worker KV for environment variables, you can ensure secure, fast, and scalable access to configuration settings, without relying on files like .env.

Steps Overview:

1. Set up Cloudflare Workers in your Next.js project
2. Create and manage environment variables in Worker KV
3. Access these variables in both local and production environments

Step 1: Setting Up Cloudflare Workers in Your Next.js Project

Before we can store environment variables in Workers KV, you'll need to configure Cloudflare Workers with your Next.js project.

1. Install Cloudflare Wrangler:

   To interact with Cloudflare Workers and Workers KV, you’ll need the Wrangler CLI tool. Install it using the following command:

   npm install -g wrangler

2. Initialize a Cloudflare Workers:

   In the root of your Next.js project, run the following command to initialize a Cloudflare Worker:

   wrangler init

   This command generates a wrangler.toml file where you’ll configure your Worker settings, such as account ID and environment. Alternatively, you can manually create a wrangler.toml file in the root directory of your Next.js project and define your configuration:

   | ---- > app
   | ---- > components
   | ---- > public
   | ---- .
   | ---- .
   | ---- README.md
   | ---- tailwind-config.ts
   | ---- tsconfig.json
   | ---- wrangler.toml

   Example wrangler.toml configuration:

   name = "meocuteequas";
   compatibility_date = "2024-09-29";
   compatibility_flags = ["nodejs_compat"];
   pages_build_output_dir = ".vercel/output/static";

Step 2: Creating and Managing Environment Variables in Workers KV

1. Create a KV namespace

   To create a new KV namespace from your local machine, run:

   npx wrangler kv namespace create "MY_NAMESPACE"

   Add the following configuration to your wrangler.toml file under the kv_namespaces array:

   [[kv_namespaces]]
   binding = "MY_NAMESPACE"
   id = "4d87f163313247eba6cef96a6b672e67"

   You can list all KV namespaces associated with your account ID by running:

   wrangler kv namespace list

   For more commands, refer to the Cloudflare documentation.

2. Create KV pairs

   To write a key-value pair to a specific namespace, run:

   wrangler kv key put host http://localhost:3000 --local

   The --local option will create a key pair in your local KV namespace for development. You can view the local key-value pairs by listing them or checking the .wrangler folder in your project root. For production use, omit the --local flag.

Step 3: Accessing Environment Variables in Next.js

Accessing in Local Development:

During local development, Workers KV will look for your local KV keys. Ensure that you create these local keys, or you’ll encounter undefined values.

To access to kv key in server component create a new kv reference and retrieve the desired key:

import { getRequestContext } from "@cloudflare/next-on-pages";

const kv = getRequestContext().env.meocuteequas;
const host = await kv.get("host");

For typescript users, create a new env.d.ts in your root directory and define a new interface

interface CloudflareEnv {
  meocuteequas: KVNamespace;
}

This allows you to easily access environment variables stored in Workers KV, ensuring a seamless transition between local and production environments.

Conclusion

Using Cloudflare Worker KV for environment variables provides a secure, scalable, and globally distributed solution, especially for production environments. By following the steps outlined in this guide, you can set up Worker KV in a Next.js project and access your variables seamlessly in both local and production environments.