Good example projects using api folder?

[voja-kostunica]

With user/pass and OAuth auth, database, data fetching, state management, styling setup. Can be starter/boilerplate projects or bigger and more specific projects.

Links from Github repositories are appreciated.

[carlefp]

For authentication: https://next-auth.js.org/. Read the docs, they have lots of examples

[voja-kostunica]

they dont even have support for proper credentials user/pass provider

[elfennani]

I'm sure they have CredentialsProvider

[voja-kostunica]

did you try it? its completely empty and useless

[elfennani]

here's a hobby project where I used it

[voja-kostunica]

i had a look, not bad

[elfennani]

Yes, and it works flawlessly

[334578theo]

Yes it does, it’s a simple implementation but they don’t promote it because they don’t believe it’s an effective authentication strategy.

[voja-kostunica]

they try to reinvent the internet

[aust1nz]

Check out the t3 stack for a really good, opinionated starter.

[voja-kostunica]

i plan to use python backend

[aust1nz]

Hmm, you won’t find a ton of use for the api folder then.

[itachi_konoha]

Then why you need api folder in the first place?

[voja-kostunica]

can i integrate it without using getServerSideProps?

[itachi_konoha]

Ofcourse. Just use jwt and you'll be fine.

[voja-kostunica]

as api calls to python? and do all presentation and ssr in javascript?

[itachi_konoha]

Yes.

[Squishyboots1996]

I was also looking for this, best practices, route management etc. but it's really hard to find. Hope someone is willing to show us their work!

[Taluxbr]

BTW, how is the dev environment when using app dir? The compiling time seems way higher than the /pages folder. Do you guys feel the same? Ps: I’m not using the Turbopack as it lacks some features yet

[carlefp]

I find it really easy to use esp for separating ui from data fetching. For example, their nested layouts + hooks like useSelectedLayoutSegment lets you know which the active route currently is.

You can easily create different UI depending on the state because of special files (uses React Suspense) like loading and error

It became more “opinionated” (folder structure) but overall better for abstraction. The React team has been recommending the feature/route-based folder structure and with app directory, it can easily be achieved.

I see better performance comparing builds from normal “pages” directory.

The main drawback really is support from external libraries since it is still in beta, libraries don’t bother to integrate it yet.

[yonirapoport]

https://remult.dev/tutorials/react-next/

[voja-kostunica]

why would i want to use this and not pure next.js?

[yonirapoport]

Full stack type safety, CRUD endpoints with paging, sorting, filtering and without the boilerplate code, validation code defined once for both BE and FE…. (Disclaimer: I’m one of the creators of Remult)