Track redirects in Next.js 14?

[deadcoder0904]

Describe the Bug

i want to track redirects in my url.

i have a filepath named src/app/[guide]/page.tsx in next.js 14 that looks like:

"use client"

import { notFound, redirect, useParams } from "next/navigation"

const Guide = () => {
	const { guide } = useParams()

	const guides = [
		{
			source: "/google",
			destination:
				"https://google.com/",
		},
	]

	const result = guides.find((g) => {
		const param = g.source.split("/")[1]
		if (guide === param) {
			return g
		}
	})

	if (!result) {
		return notFound()
	}

	redirect(result.destination)
}

export default Guide

if anyone visits https://example.com/google, then it should redirect to google.com but doesn't get tracked.

i tested it by adding a bit of timeout & it gets tracked. i've tested it & only from 1.5 seconds, it starts working. but i've made the delay to be 2 because i think it depends on loading the script & that depends on network a particular user is using. idk if i can track it like url shorteners do but that's what i want.

current solution that works:

"use client"

import { notFound, redirect, useParams } from "next/navigation"
import React from "react"

const delay = 2

const Guide = () => {
	const { guide } = useParams()
	const [show, setShow] = React.useState(true)

	React.useEffect(() => {
		let timer1 = setTimeout(() => setShow(false), delay * 1000)

		return () => {
			clearTimeout(timer1)
		}
	}, [])
	
	const guides = [
		{
			source: "/google",
			destination:
				"https://google.com/",
		},
	]

	const result = guides.find((g) => {
		const param = g.source.split("/")[1]
		if (guide === param) {
			return g
		}
	})

	if (!result) {
		return notFound()
	}

	if (show) {
		return <p className="m-2">Wait, redirecting...</p>
	}

	redirect(result.destination)
}

export default Guide

is there a way to track redirects in umami directly without adding timeout?

maybe like https://www.zachgollwitzer.com/posts/fathom-analytics-nextjs13-app-directory

Database

PostgreSQL

Relevant log output

No response

Which browser are you using? (if relevant)

Edge

How are you deploying your application? (if relevant)

Coolify

[deadcoder0904]

this is a much better solution but lmk if you guys have a better one:

"use client"

import { notFound, redirect, useParams } from "next/navigation"
import Script from "next/script"
import React from "react"

const Guide = () => {
	const { guide } = useParams()
	const [umamiLoaded, setUmamiLoaded] = React.useState(false)

	const guides = [
		{
			source: "/google",
			destination:
				"https://google.com/",
		},
	]

	const result = guides.find((g) => {
		const param = g.source.split("/")[1]
		if (guide === param) {
			return g
		}
	})

	if (!result) {
		return notFound()
	}

	if (!umamiLoaded) {
		return (
			<>
				<p className="m-2">Wait, redirecting...</p>
				<Script
					async
					src="https://umami.example.com/script.js"
					data-website-id="whateverisyourid"
					onLoad={() => {
						setUmamiLoaded(true)
					}}
				/>
			</>
		)
	}

	redirect(result.destination)
}

export default Guide