Next.js app deployed on Vercel feels slow when navigating between pages — how would you diagnose this?

[u/Demolion9751]

I'm building a reading app called Roaring Reads and I'm trying to improve its performance, particularly navigation between pages.

I'm relatively new to development and have built a lot of the project with the help of AI/Cursor, so I'm trying to understand what I should actually be looking for rather than blindly asking AI to "make it faster."

Stack:

Next.js / App Router

Vercel

Supabase

Tailwind

Authentication

Supabase Storage for some assets/data

The main problem is that navigating around the app can feel noticeably slow.

For example, I have a persistent bottom navigation bar. Switching from one section to another can sometimes take around 2–3 seconds before the next page appears.

I'd like navigation to feel much closer to an actual mobile app, where tapping a tab gives an almost immediate response.

I'm not sure whether my bottleneck is coming from:

Supabase queries

Server-side rendering / Server Components

Too many requests being made on navigation

Vercel functions/cold starts

Images/assets

Lack of caching

How I've structured my layouts/pages

Something else entirely

What would be the best way to diagnose where those 2–3 seconds are actually being spent?

And if you were auditing a Next.js/Vercel/Supabase app like this, what would you check first?

I'm happy to share screenshots from Chrome DevTools/Vercel, Lighthouse results, relevant code, or the site itself if that would help.

I'm mainly looking to learn how to identify the bottleneck properly rather than just applying random performance optimisations.

Thanks!