next.js 13

[MahmoudAlawdh]

update this project to next.js 13 using the app directory. the app directory is the new way to develop websites, its still in beta, i need you to take a look at it and experiment with it.

this is the documentation

this shouldnt take more than 2 days

[jeeasistio]

Yes sir. Will do.

[jeeasistio]

Good afternoon sir,

Can you help me how to make trpc work with next js 13?

i always get this error

[MahmoudAlawdh]

as of right now, trpc is not supported for next.js 13

read the documentation, learn the difference between client components and server components. learn about the files, page.tsx layout.tsx loading.tsx ... etc

learn about the fetching and mutation learn how to implement SSR,ISR,CSR ( hint, for these three you will use fetch function with different params) learn about the new react function " use "

i have pushed an updated, this should get you started.

[jeeasistio]

yes sir, thank you.

[jeeasistio]

Good evening sir,

I've finished updating the repo, Can you review my work sir?

[MahmoudAlawdh]

looks good, one last thing, can you add pagination to these pages ?

• /
• /ssr
• /isr
• /csr

also fix the issue with the prisma-client instances ( hint: https://github.com/MahmoudAlawdh/umbrella-design/blob/7aee31e8b83db57ee1599ab742119d4f56fc3c7d/prisma/connections.ts)

[jeeasistio]

Yes sir

[jeeasistio]

Good evening sir,

Can you help me how to make ssr pagination work? Is this possible sir or can i use pagination with numbers?

[jeeasistio]

Good afternoon sir,

I've finished adding paginations on the pages sir, but im having some issues:

build error:

csr page is not interactive the button doesnt work:

[MahmoudAlawdh]

comments,

1. whats the difference between path these paths ?

   • /
   • /ssr

2. no need to use fetch in ssr, because its on the server you can use prisma directly, fetch should be used on csr

3. always use named exports, link

4. there is alot of components that is only used in a single place, you can make the project easier to read and maintain

5. for isr read this, use

   export const revalidate = 60; // revalidate this page every 60 seconds

   when you are not using fetch

fix these first

[jeeasistio]

Yes sir.

[jeeasistio]

Good afternoon sir,

I've refactored the code, I'm having an issue using the new "use hook", it triggers an infinite fetch so I've used a useEffect as a temporary workaround sir, Can you review my work sir?

[MahmoudAlawdh]

/csr/[name] useEffect should be

    useEffect(() => {
        const fetchFunc = async () => {
            const res = await fetch(`/api/getCountry?name=${params.name}`);
            setCountry(await res.json());
        };
        fetchFunc();
    }, [params.name]);

let me know if this fixes it

[jeeasistio]

yes sir, thank you. is it okay if i havent used "use hook"?

[MahmoudAlawdh]

yes, there is no issues, but i need you to read and learn about it, i think in the next 6 months app folder will be stable and we will move umbrella to it, that's why i need you to get familiar with it.

also try to find resources on how to use trpc/react-query with the app folder

if you find anything interesting send it to me please

[jeeasistio]

Yes sir.

[jeeasistio]

Good evening sir,

I've fixed the csr page to use "use hook". It is the fetchfunc function that creates infinite loop. https://www.youtube.com/watch?v=zwQs4wXr9Bg&t=1237s

https://github.com/jeeasistio/trpc-prisma/blob/0fe02bf4f21cca723e2ae605140e0d17a9ead372/app/csr/page.tsx#L9-L11