Questions around trpc with next.js app router

I have a few questions in wrapping my head around how to get it to work.

Is

withTRPC<AppRouter>

withTRPC<AppRouter>

still required? The docs show it: https://trpc.io/docs/v9/nextjs#5-configure-_apptsx but it looks like the example is around the pages router and not app router.
I am using

createTRPCNext<AppRouter>

createTRPCNext<AppRouter>

am I meant to use both

createTRPCNext

createTRPCNext

as well as

withTRPC

withTRPC

?

Below is some of my code for reference

If you're using tRPC in a new project, consider using one of the example projects as a starting point or for reference: tRPC Example Projects