Consuming a Rails API with a NextJs client
tl;dr; Previously here, I wrote about how to write a modern web application using Rails as a full-stack framework just writing HTML and Vanilla Javascript. Now we will go ahead creating a React client App using NextJs.
The existing API has the following endpoints:
GET /api/kit/products(.:format)
POST /api/kit/products(.:format)
GET /api/kit/products/:id(.:format)
PATCH /api/kit/products/:id(.:format)
PUT /api/kit/products/:id(.:format)
DELETE /api/kit/products/:id(.:format)In the new project, we have the same screen as before:
We have a lot of customized components:
src/components/
├── Form
│ ├── Actions.tsx
│ ├── Input.tsx
│ └── index.tsx
├── Layout
│ ├── Page.tsx
│ ├── Sidebar.tsx
│ └── index.tsx
├── Loading.tsx
├── LoadingOverlay.tsx
├── Notification.tsx
├── Products
│ ├── Form.tsx
│ └── Sidebar.tsx
└── SearchList
├── Form.tsx
├── ListItem.tsx
└── index.tsxBut our pages are simple and short. For example, take a look at the products page code:
Highlights
NextJs is just a choice, not a requirement
The API made using Ruby on Rails is completely independent of the NextJs client application developed with NextJs. You could use any RESTfull client application to consume the existing API.
In my project, I am using the NextJs project as a subfolder of my Rails repository, but you could put it anywhere.
Why NextJs
I already worked with React Router and React Navigation, but when I knew the Next/Router and all related features, as the Next/Link, I loved it. We can use partial load and caches. Get more info here.
Conventions
You can create your own convention for your own projects. But, in my opinion, it is beneficial to use a convention that is popular and validated in production by many other developers. Like Ruby on Rails, NextJs gives you a directory structure, core resources (link, routes, image, etc.), and rich documentation.
SSR (Server Side Rendering)
After creating a few projects using SPA, it doesn’t seem to me to be a good choice for big projects. So, for now, I am using SSR with NextJs. The main use of SSR is to improve the SEO, but I like this approach to offer a better UX.
React Query is the link between the Rails and NextJs
Working together with Axios (my code), it is a great option to consume the REST API (and GraphQL). You have the access to: isLoading, isError, data, error, and others. It is a very easy way to load data and rescue errors.
React Context
I don’t like https://react-redux.js.org/, it brings complexity to the project that I don’t think is a good thing. But we can use the React Context and React Reducer to offer storage and events to manage the states of the application. You can see it on the project here https://github.com/raphox/rails-7-fullstack/tree/nextjs/frontend/src/contexts/products.
In my code, I am using a context to share the state between different components on the same screen. The Form component is able to update the product item in the sidebar list.
The React Query also uses a context and we can exchange states between them. After updating a product, we can trigger changes to the product list.
React components with namespace
It is something that I learned recently. I used it in my project to offer a way to override children of some components and prevent setting many properties through the parent. Like in the following code:
In the previous code, we have the namespace SidebarPrimitive with nested Root, Header, and List components. I am using the Root component to wrap the content and I am passing the props to the respected child.
Tailwind
There are controversies related to it, but trust me, create a project using it and make sure that you don’t like or love it.
Dependencies:
- https://tailwindcss.com/ “Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles, and then writing them to a static CSS file.”
- https://www.radix-ui.com/docs/primitives/utilities/slot “Merges its props onto its immediate child.”
- https://tanstack.com/query/ “Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte”
- https://axios-http.com/ “Axios is a simple promise-based HTTP client for the browser and node.js. Axios provides a simple-to-use library in a small package with a very extensible interface.”
- https://github.com/lukeed/clsx “A tiny (228B) utility for constructing `className` strings conditionally.”
- https://lodash.com/ “A modern JavaScript utility library delivering modularity, performance & extras.”
- https://react-hook-form.com/ “Performant, flexible and extensible forms with easy-to-use validation”
- https://github.com/jquense/yup “Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both.”