I create a fullstack appliation by next.js
Answered
Grass carp posted this in #help-forum
Grass carpOP
As a frontend beginner, I have created a fullstack application using Next.js. What do you think about the stack I used, and what are some other popular stacks I should learn? please rate my package json

Answered by B33fb0n3
this is my default package.json: (see attached). And then I add the packages that are needed for the specific project (I mentioned them above). Maybe the versions are not the latests 🙂
Oh, remove sharp there. It's integrated in nextjs itself (wasn't before)
Oh, remove sharp there. It's integrated in nextjs itself (wasn't before)
19 Replies
@Grass carp As a frontend beginner, I have created a fullstack application using Next.js. What do you think about the stack I used, and what are some other popular stacks I should learn? please rate my package json<:blob_wave:753870952873590814>
I like to use: nextjs, tailwind, shadcn, next-auth, drizzle, postgresql (custom server), s3, react query, typescript and bunnycdn.
my go-to stack is: next.ts, taiwind, chadcn, lucia auth, prisma, mysql, s3 or bunnycdn for file upload.
I am gonna use drizzle from next project, cause apparently prisma isn't supported on edge. I can't even test it in middleware locally even tho I don't deploy on edge.
I am gonna use drizzle from next project, cause apparently prisma isn't supported on edge. I can't even test it in middleware locally even tho I don't deploy on edge.
This stack looks solid, I use a very similar setup.
My only nitpicks would be:
- Your
- Using
- Using two icon libraries, I'd pick one. For bundle size + style consistency (technically three, because radix has some built-ins, although I stray away from those)
My only nitpicks would be:
- Your
bcrypt type should be a dev import- Using
dayjs and date-fns seems a little bit redundant, we have to handle all kinds of complex date operations on our apps and get along well just using date-fns and occasionally date-fns-tz- Using two icon libraries, I'd pick one. For bundle size + style consistency (technically three, because radix has some built-ins, although I stray away from those)
By the way, this is a fun thread, there should be a "rate my package json" thread or something 😂 actually leads to a lot of interesting discussion.
@B33fb0n3 I like to use: nextjs, tailwind, shadcn, next-auth, drizzle, postgresql (custom server), s3, react query, typescript and bunnycdn.
Grass carpOP
Great! I once learned React Query. However, after I removed it, I couldn't find any use cases for React Query in Next.js. I'm curious to know what issues you've solved using React Query in Next.js.
@averydelusionalperson my go-to stack is: next.ts, taiwind, chadcn, lucia auth, prisma, mysql, s3 or bunnycdn for file upload.
I am gonna use drizzle from next project, cause apparently prisma isn't supported on edge. I can't even test it in middleware locally even tho I don't deploy on edge.
Grass carpOP
What is Edge? I am using Cloudflare.
@Luke This stack looks solid, I use a very similar setup.
My only nitpicks would be:
- Your `bcrypt` type should be a dev import
- Using `dayjs` and `date-fns` seems a little bit redundant, we have to handle all kinds of complex date operations on our apps and get along well just using `date-fns` and occasionally `date-fns-tz`
- Using two icon libraries, I'd pick one. For bundle size + style consistency (technically three, because radix has some built-ins, although I stray away from those)
Grass carpOP
- A key reminder: I will adjust it.
- I’ve learned from many tutorials to finish my product, so it has some duplicate libraries. Considering your reminder, I think I should simplify it.
- I’ve learned from many tutorials to finish my product, so it has some duplicate libraries. Considering your reminder, I think I should simplify it.
@Grass carp - A key reminder: I will adjust it.
- I’ve learned from many tutorials to finish my product, so it has some duplicate libraries. Considering your reminder, I think I should simplify it.
Good luck with your app! My feedback is all small, you've picked a great stack
@Grass carp What is Edge? I am using Cloudflare.
Edge is a runtime for Next.js, I wouldn't worry too much about it unless you run into bugs (specifically with middleware I've experienced)
You can read more about it here: https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes, but once again, I'd honestly ignore it until it pops up personally
@Grass carp Great! I once learned React Query. However, after I removed it, I couldn't find any use cases for React Query in Next.js. I'm curious to know what issues you've solved using React Query in Next.js.
It solves these issues:
https://nextjs-forum.com/post/1269001348913954899#message-1269673356626624544
https://nextjs-forum.com/post/1265811123375046747#message-1266068346869252207
https://nextjs-forum.com/post/1263090904277716992#message-1263094831207551016
https://nextjs-forum.com/post/1261618478650228898#message-1261636332141412405
https://nextjs-forum.com/post/1259849117597831238#message-1259851475308511253
https://nextjs-forum.com/post/1251886532067852368#message-1251999340709548092
And many many more. It let you keep control over your clientside data. For SSR it's useless, but for CSR it's really useful. You might want to take a look at this: https://github.com/B33fb0n3/rq-profile-picture (keep control over your data)
Ah and what others said: for icons I am using react-icons. And for password encryption I am using becrypt as well. I forogt that
https://nextjs-forum.com/post/1269001348913954899#message-1269673356626624544
https://nextjs-forum.com/post/1265811123375046747#message-1266068346869252207
https://nextjs-forum.com/post/1263090904277716992#message-1263094831207551016
https://nextjs-forum.com/post/1261618478650228898#message-1261636332141412405
https://nextjs-forum.com/post/1259849117597831238#message-1259851475308511253
https://nextjs-forum.com/post/1251886532067852368#message-1251999340709548092
And many many more. It let you keep control over your clientside data. For SSR it's useless, but for CSR it's really useful. You might want to take a look at this: https://github.com/B33fb0n3/rq-profile-picture (keep control over your data)
Ah and what others said: for icons I am using react-icons. And for password encryption I am using becrypt as well. I forogt that
for password hash, I use argon2
Today,I simplify my package json.This is my last version.
@Grass carp Today,I simplify my package json.This is my last version.
this is my default package.json: (see attached). And then I add the packages that are needed for the specific project (I mentioned them above). Maybe the versions are not the latests 🙂
Oh, remove sharp there. It's integrated in nextjs itself (wasn't before)
Oh, remove sharp there. It's integrated in nextjs itself (wasn't before)
Answer
@Grass carp solved?
@B33fb0n3 <@1258611178091970663> solved?
Grass carpOP
yes!
