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 createTRPCNextcreateTRPCNext as well as withTRPCwithTRPC ?

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