How to Connect Your Next.js React Application to Redis

Recently, I had to add Redis to a React application running on Next.js using server actions. Here are the important pieces.

  1. Select an npm package

I went with ioredis. At the time of writing, it had 7 million downloads, and after opening their repo, the last commit was from two days ago. This means the project is active.

npm i ioredis
  1. Initialize a redis client
const redis = new Redis(process.env.REDIS_CONNECTION_STRING);

If another team takes care of the infrastructure they will provide a “connection string”, that looks something like this:

rediss://[user]:[password]@[host]:[port]

For this demo I’m using Aiven, they offer a 1GB free account, which is more than enough for a POC or prototype.

  1. Read from Redis

In the previous step, if all went well: valid credentials, Redis server running, correct configurations; a Redis client instance should have been created. This means reading is as easy as running the following lines:

export async function readFromRedis() {
  try {
    const value = await redis.get("name");
    return value;
  } catch (error) {
    console.error("Error reading from Redis:", error);
    return "";
  }
}

Note: In my case, name is the key I’ll use to save data into Redis.

  1. Write to Redis
export async function writeToRedis(name: string): Promise<void> {
  try {
    await redis.set("name", name);
  } catch (error) {
    console.error("Error writing to Redis:", error);
  }
}

Notice how the key is name

  1. Ensure helpers are run on the server

Is important to run these helpers in the server so the credentials are not exposed in the browser. Make sure to use "use server";. Take a look at the example.

Notice how I’m using an environment variable to store the Redis connection string: process.env.REDIS_CONNECTION_STRING. This information is sensitive and shouldn’t be exposed in the browser.

This adds an extra jump from the browser to your server to the Redis server, but it is a secure way. There’s an alternative to securely connect from the browser, but I would probably still go with a server function.

  1. Finally, plug the methods into your React application.
const [inputValue, setInputValue] = useState("");
const [name, setName] = useState("");

const handleButtonClick = async () => {
  await writeToRedis(inputValue);
  setInputValue("");
  await fetchName();
};

const fetchName = async () => {
  const nameFromRedis = await readFromRedis();
  setName(nameFromRedis);
};

useEffect(() => {
  fetchName();
}, []);

Take a look at the full component.

Demo

Make sure to take a look at the demo page

Conclusion

Adding Redis is pretty straightforward, especially if you have a team that takes care of the infrastructure. If not, you might need to spend a bit of time with AWS or any other provider, making sure you set up the Redis server properly and follow secure guidelines.

Once the Redis server is set up, plugging it into your React application is just about selecting an npm package that works for you. These packages do the heavy lifting and provide helpers to write and read, which is what you will need most of the time.

Thanks for reading.