Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
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.
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
-
-
-
-
**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.
https://github.com/lukeed/clsx “A tiny (228B) utility for constructing className strings conditionally.”
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.”
**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.
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.”
Why Next JS **I already worked with React Router and React Navigation, but when I knew the **Next/Router
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) Enter fullscreen mode Exit fullscreen mode 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.tsx Enter fullscreen mode Exit fullscreen mode But 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 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. Why Next JS **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 **After to create a few projects using SPA, it doesn’t seem to me 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 like this approach to offer the 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 a complexity to the project that I don’t think soo is a good thing. But we can use the React Context and React Reducer to offer a store and events to manager states of the application. You can see the it on the project here https://github.com/raphox/rails-7-fullstack/tree/nextjs/frontend/src/contexts/products. *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 to set many properties throth 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.” The project rails-7-fullstack/frontend at nextjs · raphox/rails-7-fullstack External references: https://www.typescriptlang.org/ https://www.radix-ui.com https://reactjs.org/docs/context.html https://medium.com/@kunukn_95852/react-components-with-namespace-f3d169feaf91
Why Next JS **I already worked with React Router and React Navigation, but when I knew the **Next/Router
https://react-hook-form.com/ “Performant, flexible and extensible forms with easy-to-use validation”
**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.
https://lodash.com/ “A modern JavaScript utility library delivering modularity, performance & extras.”
**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.