Add /random endpoint to display a random http.cat image.

[taichikuji]

Fixes #255

This is a basic implementation on the issue request #255, please let me know if this is implemented correctly according to the project's coding style and instructions.

If there's any request to modify it, maybe to the Components section, I can do that as well.

The way it works is the following:

Upon visiting http.cat/random, it triggers this code (aka app/random/page.tsx). It will pull the http dictionary data from statuses.js and do a Math.random() on it. This will pull a pseudo-random value which it will then redirect towards.

What do you think? Thanks :)

[Copilot]

Pull request overview

Adds a new /random route to the Next.js app that selects a random HTTP status code from the existing statuses dictionary and redirects the user to the corresponding status page.

Changes:

• Introduces app/random/page.tsx to choose a random status code from @/lib/statuses.
• Redirects requests for /random to /status/{randomStatus}.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Because the project is configured with output: 'export' (static export), this page will be prerendered at build time. That means Math.random() will be evaluated during the build and /random will always redirect to the same status code in production. To make /random vary per request on a static export, implement the selection/redirect on the client (e.g., a client component that picks a random code in an effect and navigates with router.replace/window.location), or change the app away from static export if a true HTTP redirect per request is required.

Suggested change

	import { redirect } from 'next/navigation';
	import statuses from '@/lib/statuses';
	export default function Random() {
	const statusCodes = Object.keys(statuses);
	const randomStatus = statusCodes[Math.floor(Math.random() * statusCodes.length)];
	redirect(`/status/${randomStatus}`);
	'use client';
	import { redirect } from 'next/navigation';
	import { useEffect } from 'react';
	import { useRouter } from 'next/navigation';
	import statuses from '@/lib/statuses';
	export default function Random() {
	const router = useRouter();
	useEffect(() => {
	const statusCodes = Object.keys(statuses);
	const randomStatus = statusCodes[Math.floor(Math.random() * statusCodes.length)];
	router.replace(`/status/${randomStatus}`);
	}, [router]);
	return null;

[rogeriopvl]

Hi @taichikuji , thanks for the PR.

The core routing of http.cat happens in the Nginx configuration (not provided in this repo). It has a rewrite rule that maps the URL path to an image file, so that https://http.cat/404 maps to the file /public/images/404.jpg for instance.

So, to me, the right place to implement this /random endpoint would be in the Nginx config, and with specific caching headers to make sure that Cloudflare does not cache it, otherwise we lose the randomness.

Now, @copilot 's suggested fix to the PR may also work, it may impact the user experience a bit with the redirect and all, but it's simpler and keeps the logic in the codebase.

[taichikuji]

Absolutely understandable, if it's implemented outside the repository, then I'll close the PR, unless your suggestion would be to implement the changes indicated by Copilot. I can implement it in another commit.

I will send the commit soon with those suggestions in place, thanks again!

[Ryuno-Ki]

How would you implement the logic in NginX? OTOH I would assume you'd need a scripting language (a subset of JS + Lua is available through extensions -- they have an impact on Certbot however).

[taichikuji]

If there's anything else that should be done or is required to get the PR approved, let me know!