import { httpBatchLink } from '@trpc/client/links/httpBatchLink' ; import { loggerLink } from '@trpc/client/links/loggerLink' ; import { withTRPC } from '@trpc/next' ; import { DefaultLayout } from 'components/DefaultLayout' ; import { NextPage } from 'next' ; import { AppProps } from 'next/app' ; import { AppType } from 'next/dist/shared/lib/utils' ; import { ReactElement , ReactNode } from 'react' ; import { AppRouter } from 'server/routers/_app' ; import superjson from 'superjson' ; export type NextPageWithLayout = NextPage & { getLayout ? : ( page : ReactElement ) => ReactNode ; } ; type AppPropsWithLayout = AppProps & { Component : NextPageWithLayout ; } ; const MyApp = ( ( { Component , pageProps } ) => { const getLayout = Component . getLayout ?? ( ( page ) => < DefaultLayout > { page } < /DefaultLayout>); return getLayout ( < Component { ... pageProps } / > ) ; } ) as AppType ; function getBaseUrl ( ) { if ( process . browser ) { return '' ; } if ( process . env . VERCEL_URL ) { return `https://${ process . env . VERCEL_URL }` ; } if ( process . env . RENDER_INTERNAL_HOSTNAME ) { return `http://${ process . env . RENDER_INTERNAL_HOSTNAME }:${ process . env . PORT }` ; } return `http://localhost:${ process . env . PORT ?? 3000 }` ; } export default withTRPC < AppRouter > ( { config ( ) { link return { link links : [ loggerLink ( { enabled : ( opts ) => process . env . NODE_ENV === 'development' || ( opts . direction === 'down' && opts . result instanceof Error ) , } ) , httpBatchLink ( { url : `${ getBaseUrl ( ) }/api/trpc` , } ) , ] , link transformer : superjson , } ; } , link ssr : true , /**
     * Set headers or status code when doing SSR
     */ responseMeta ( { clientErrors } ) { if ( clientErrors . length ) { return { status : clientErrors [ 0 ] . data ?. httpStatus ?? 500 , } ; } return { } ; } , } ) ( MyApp ) ;