ja_iy Posts - Answer Overflow

ja_iy

•Created by ja_iy on 6/21/2023 in #questions

How to implement different not-found pages for diffrent routes in next js app dir

Hi trying to implement a different 404 page for different parts of an app separated by route groups https://nextjs.org/docs/app/building-your-application/routing/route-groups Is there currently any way to do this apart from checking the pathname in the root app/not-found file. ( Tried putting a not-found file in the separate route groups also but doesn't seem to be working ). ty : D

3 replies

TTCTheo's Typesafe Cult

•Created by ja_iy on 5/23/2023 in #questions

Link won't navigate to app/not-found.tsx in app dir

Hi I made a sandbox example to demo this https://codesandbox.io/p/sandbox/elastic-julien-q8713m?file=%2FREADME.md If I delete the app/not-found.tsx then next links will work as expected (with the default 404 page), am I doing something wrong or is this a bug, ty.

5 replies

TTCTheo's Typesafe Cult

•Created by ja_iy on 5/10/2023 in #questions

Next font sever/client mismatch in app dir

Hi trying to include a style tag which sets css vars based on next font but get the following error

Text content did not match. Server: ":root {
    --font-p: &#x27;__Montserrat_656221&#x27;, &#x27;__Montserrat_Fallback_656221&#x27;;
}" Client: ":root {
    --font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
    at style
    at body
    at html
    at RedirectErrorBoundary 
    ...
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

Text content did not match. Server: ":root {
    --font-p: &#x27;__Montserrat_656221&#x27;, &#x27;__Montserrat_Fallback_656221&#x27;;
}" Client: ":root {
    --font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
    at style
    at body
    at html
    at RedirectErrorBoundary 
    ...
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

seems likes next font is adding ' on the server, tried logging it but didn't appear in logs ty for any help here is the layout.tsx (root layout)

import { Montserrat } from 'next/font/google'

const font_p = Montserrat({
    subsets: ['latin'],
    variable: '--font-p',
})

const var_styles = `:root {
    --font-p: ${font_p.style.fontFamily};
}`

export default async function RootLayout({ children }: {children: React.ReactNode,}) {

    return <html lang="en">

        <body className={`${font_p.variable}`}>

            <style>{var_styles}</style>
            
            {children}
        </body>

    </html>
}

import { Montserrat } from 'next/font/google'

const font_p = Montserrat({
    subsets: ['latin'],
    variable: '--font-p',
})

const var_styles = `:root {
    --font-p: ${font_p.style.fontFamily};
}`

export default async function RootLayout({ children }: {children: React.ReactNode,}) {

    return <html lang="en">

        <body className={`${font_p.variable}`}>

            <style>{var_styles}</style>
            
            {children}
        </body>

    </html>
}

8 replies

TTCTheo's Typesafe Cult

•Created by ja_iy on 4/3/2023 in #questions

Where to find implementation of bodyParser middleware for next js api route

Hi trying to manually import the next js bodyParser middleware but cant find it's implementation in the next github repo, anybody know where I can find it ty : D (Doing it to create a middleware for a trpc openapi router so can have the raw body for some endpoints and the parsed body for others)

4 replies

TTCTheo's Typesafe Cult

•Created by ja_iy on 3/22/2023 in #questions

Any good practices for creating trpc queries/mutes that don't use Prisma, in a t3 app that does.

From my understanding adding Prisma to the context of a router at it's base (createTRPCContext), results in the Prisma client being present in all sub routes used by that router, but we don't always need access to it so it's slowing down some serverless functions unnecessarily. Currently trying:

Separate Routers : Creating separate tRPC routers with different contexts (one including the Prisma client). - we lose some DX because of having to prefix/separate the api , potential semantic name conflicts, makes defining sub routers more verbose. - doesn't seem like SOA in the trpc examples is useable for this as it needs common context for routers. Middleware : adding Prisma client to the ctx object using middleware and then using pipe where necessary to create additional middleware. - Will this have any known performance drawbacks on sub routes that actually use this middleware vs putting Prisma client in the base ctx of the router? - Will this actually achieve goal, i.e. does the entire router get sent to the serverless function or just the specific query/mutation. ( my current understanding is just the query/mutation, am I wrong)

New to t3-stack & loving it any advice would be appreciated ty : D

11 replies

Gaming

Programming