hooks.ts for server and client, but simple redirect not working unless I use hooks.server.ts

[rielzzapps]

I start a simple test application on sveltekit, and I add this hooks.ts file:

import { redirect, type Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
	const { pathname } = event.url;
	console.log({ pathname });

	if (pathname.startsWith('/test')) {
		throw redirect(301, '/');
	}

    return await resolve(event);
};

My expectations, because of hooks.ts, is that when I go to /test I just see the svelte welcome page.
But it gives the 404.

When I change it to hooks.server.ts, it works as expected. I try to understand why. Hooks.ts should be for server- and client-side code?

[wwwdepot]

You should use const { goto } from '$app/navigation' for client-side navigation, while redirect is meant for server-side operations.

For further details, check out the SvelteKit Redirects documentation.

[geodask]

Hi @rielzzapps,

The handle hook is server-only and must be defined in src/hooks.server.ts. SvelteKit ignores it in hooks.ts, which is why your redirect for /test doesn’t trigger and you get a 404. Your code with throw redirect(301, '/') is correct and works in hooks.server.ts because that’s the designated file for server hooks. hooks.ts isn’t used for server or client hooks in modern SvelteKit—use hooks.server.ts for server logic and hooks.client.ts for client-side hooks (like handleError).

Check the hooks docs and redirects docs for more details. Hope that clears it up!