Fetch data from Rails API with Next.js

In this episode we will setup a repo that contains a Rails app running in API mode as well as a Next.js app for the frontend. I'll walk you through setting up each app from scratch and showing you how to connect them so that they can communicate via the API.
Tutorial Code:
github.com/ken...
Ruby on Rails:
rubyonrails.org
Next.js:
nextjs.org
TanStack Query:
tanstack.com/q...
--
Follow along to watch us build a Rails / SaaS / B2C app from the ground up.
Clipflow.co
www.clipflow.co
Twitter
Darrell - / craftbuildcut
Ken - / kennng

[@tillcarlos664]

This is exactly what my team needed - one guy works on this and hasn't done it before. Just forwarded it.

[@kengreeff]

Nice!

[@KierynMoore]

Thanks Ken. Videos are very helpful to follow along

[@kengreeff]

Thanks mate! Hope you got something useful out of it :)

[@EnjoytheMents]

Sick editing. Would be nice more series on this.

[@kengreeff]

Maybe in the future but I’m working on a big series building a directory with Rails! Similar concepts just without Next.js

[@DestinoDello]

Wow i have been waiting for this thank you ken always

[@kengreeff]

Hope you enjoyed it!

[@kengreeff]

Let me know what you want to see next!

[@DestinoDello]

@@kengreeff rails graphql api, clean architecture and more production stuff logging monitoring... 🙏

[@danimusbar]

Awesome... Suddenly appear in my home KZbin, keep up Sir

[@kengreeff]

Thanks and welcome :)

[@sepehrkashani824]

Love it 🔥🔥🔥🔥🔥

[@kengreeff]

Thanks mate!

[@768hiddenneurons]

Wow thank you! Was just looking for this kind of setup for my app! Wanna move my React & Rails project from a monolith to a monorepo like this one.

[@kengreeff]

Love that it was useful. I’ve just released a follow up which shows how to add the crud endpoints as well :)

[@mark-ball]

Thanks Ken, good to see some basic React Query stuff, and the auto-generated types from the rails schema was interesting too. Would love to see create, update, delete functionality the React Query way with useMutation.

[@kengreeff]

Thanks mate! Had another request for the same so I think I’ll have to add it to the list

[@nadetdevfullstack7041]

Excellent!

[@kengreeff]

Glad it helped!

[@suiteyousir]

rails with intertia may an interesting one to try

[@kengreeff]

yea, I'm keen to give it a shot soon - just haven't found the need just yet. Stimulus + ViewComponents have been good enough so far :)

[@tillcarlos]

Question: how do you deploy these 2 repositories together? Any kind of versioning needed?

[@kengreeff]

We ran separate repos in production and never had any real issues without versioning. I would probably setup the pipeline to deploy API first then the frontend after. Could also use feature flags. I think you can even have these issues when using next.js only - vercel tried to solve but not sure how well it works as I’ve never used that feature.

[@redwansikder3847]

whats the difference between using app directory directly vs src/app directory?

[@kengreeff]

To be honest, not sure. It’s been a convention to use the src directory for many years in js so probably just a preference thing. You can throw all your other directories into src as well, but either way probably works!

[@suiteyousir]

which shortcut did you use to sort the json.extract! ?

[@kengreeff]

Do you know timestamp?

[@suiteyousir]

@@kengreeff 24:10

[@kengreeff]

It's just F9 in my VSCode setup. I'm using the Sort lines extension - marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines

[@pablovillar4424]

Can u make a simple crud with ror and nextjs for us? Button create, edit, delete and show more

[@kengreeff]

Hey Pablo, thanks for the great suggestion. I'll see what I can do if you make sure you subscribe and hit the bell icon ;)

[@pablovillar4424]

Done ;)

[@youyoumu]

🎉

[@danimusbar]

Btw, please make another tutorial using Phoenix Framework with Next JS

[@kengreeff]

Unfortunately I have zero experience with Phoenix so can’t provide much value there. I do have a follow up to this video though :)

[@eltonsantosoficial]

No way, it's hard mode. Jesus, there is a an easier and simpler way to do this. You made things too complicated to do something simple.

[@kengreeff]

Lots of ways to solve the same problems. This is just one of them if you want to use Rails as the API for Next.js frontend.