Zenn
🗂

RailsとNext.jsの連携(SPA)

2024/11/13に公開
Next.js
Rails
SPA
tech

この記事の概要

RailsとNext.jsのSPAの連携方法に絞ってこちらの記事を書いていきます。

Gemfileにrack-corsを追加

以下のようにまず、Gemを入れます。

gem 'rack-cors'

その後に

bundle install

をします。

CORS設定ファイルを作成または編集

config/initializers/cors.rbファイルを作成または編集します。

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3001' # Next.jsアプリが動作するURLを指定

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

CORS設定を反映させるために、Railsサーバーを再起動します。

$ rails server

Next.jsアプリケーションからのAPI呼び出す

ここからNext.jsを使ってRailsのAPIを呼び出したいと思います。
今現在はレストラン一覧が表示されるだけの状態です。

import React, { useEffect } from 'react';

const Component = () => {
  return (
    <>
      レストラン一覧
    </>
  );
};

これを以下のように追記します。

import React, {useEffect} from 'react';

//api
import { fetchRestaurants } from '../apis/restaurants';

export const Restaurant = () => {
  useEffect(() => {
    fetchRestaurants()
    .then((data)=>
      console.log(data)
    )
  },[])
    return (
        <>
          レストラン一覧
        </>
      );
}

すでに作成したファイリ達です。

import axios from 'axios';
import { restaurantsIndex } from '../urls/index'

export const fetchRestaurants =() => {
  return axios.get(restaurantsIndex)
  .then(res => {
    return res.data
  })
  .catch((e) => console.error(e))
}

const DEFAULT_API_LOCALHOST = 'http://localhost:3000/api/v1';

export const restaurantsIndex = `${DEFAULT_API_LOCALHOST}/restaurants`;
export const foodsIndex = (restaurantId: number) =>
  `${DEFAULT_API_LOCALHOST}/restaurants/${restaurantId}/foods`;
//省略

ここで、Next.jsアプリケーションのルートページでRestaurantsコンポーネントを使用しています。

import { Restaurant } from '../containers/Restaurants';

const RestaurantsPage　 = () => {
    return <Restaurant />;
  };
  
  export default RestaurantsPage;

動作確認

Rails側で

rails server

Next.js側で

npm run dev

です。

http://localhost:3000/api/v1/restaurantsで確認したら

スクリーンショット 2024-08-05 2.30.49.png

しっかりデータが取れていました。

SPAを学べる教材

Techpitでよく学べるので、よかったら学んでください。

https://www.techpit.jp/courses/138

https://www.techpit.jp/

Discussion