Consuming a Rails API with a NextJs client

This page summarizes the projects mentioned and recommended in the original post on dev.to

Nutrient – The #1 PDF SDK Library, trusted by 10K+ developers
Other PDF SDKs promise a lot - then break. Laggy scrolling, poor mobile UX, tons of bugs, and lack of support cost you endless frustrations. Nutrient’s SDK handles billion-page workloads - so you don’t have to debug PDFs. Used by ~1 billion end users in more than 150 different countries.
www.nutrient.io
featured
CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
  1. rails-7-fullstack

    **NextJs is just a choice, not a requirement **The API made using Ruby on Rails is completely independent of the Next JS 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.

  2. Nutrient

    Nutrient – The #1 PDF SDK Library, trusted by 10K+ developers. Other PDF SDKs promise a lot - then break. Laggy scrolling, poor mobile UX, tons of bugs, and lack of support cost you endless frustrations. Nutrient’s SDK handles billion-page workloads - so you don’t have to debug PDFs. Used by ~1 billion end users in more than 150 different countries.

    Nutrient logo
  3. clsx

    A tiny (239B) utility for constructing `className` strings conditionally.

    https://github.com/lukeed/clsx “A tiny (228B) utility for constructing className strings conditionally.”

  4. Yup

    Dead simple Object schema validation

    https://github.com/jquense/yupYup 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.”

  5. TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  6. TanStack Query

    🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

    **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.

  7. Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    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.”

  8. react-router

    Declarative routing for React

    Why Next JS **I already worked with React Router and React Navigation, but when I knew the **Next/Router

  9. CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  10. react-redux

    Official React bindings for Redux

  11. react-navigation

    Routing and navigation for your React Native apps

    Why Next JS **I already worked with React Router and React Navigation, but when I knew the **Next/Router

  12. react-hook-form

    📋 React Hooks for form state management and validation (Web + React Native)

    https://react-hook-form.com/ “Performant, flexible and extensible forms with easy-to-use validation”

  13. Next.js

    The React Framework

    **NextJs is just a choice, not a requirement **The API made using Ruby on Rails is completely independent of the Next JS 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.

  14. lodash

    A modern JavaScript utility library delivering modularity, performance, & extras.

    https://lodash.com/ “A modern JavaScript utility library delivering modularity, performance & extras.”

  15. axios

    Promise based HTTP client for the browser and node.js

    **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.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • 14 Must-Have React Libraries Every Beginner Developer Should Know in 2025: 🚀

    8 projects | dev.to | 26 Dec 2024
  • Fundamentals of React Native App Development: Dependencies, Performance, Native Modules, and Publishing Guide

    13 projects | dev.to | 5 Oct 2024
  • Building a Universal React app with Expo, NextJS & Nativewind

    7 projects | dev.to | 2 Jul 2024
  • 45 NPM Packages to Solve 16 React Problems

    22 projects | dev.to | 14 Nov 2023
  • Nx Console gets Lit

    7 projects | dev.to | 30 Jun 2023

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?