Laravel＋React＋Next.jsを使う方法

Laravel8にReactのフレームワークNext.jsを使う方法の記事です。

使用するバージョン
node : 16.12.0
next : 11.1.2
react : 17.0.2
laravel : 8.65

LaravelとNext.jsの使い方は下記ページも参考にしてください。

　Laravel8でシンプルなCMSを作るチュートリアル[2020年版]
　Next.js入門（TypeScript版）

$ mkdir laravel-next

$ cd laravel-next

$ composer create-project laravel/laravel api

$ yarn create next-app --typescript

? What is your project named? › client

laravel-next
　├ api
　│　└ Laravelが入っている
　└ client
　 　└ Next.jsが入っている

FRONTEND_URL=http://localhost:3000

return [
   'paths' => ['api/*', 'sanctum/csrf-cookie'],
   'allowed_methods' => ['*'],
 ];

    return 'Hello Next.js';

$ cd api

$ php artisan serv

http://localhost:8000/api/hello

{
    "compilerOptions": {
      // ...
      "baseUrl": "src/",
      "paths": {
        "@/*": ["./*"]
      }
    },
    // ...
  }

$ yarn add swr
$ yarn add axios

下記ファイルを作成し、Axiosの初期設定をします。

client/src/libs/axios.ts

import Axios from 'axios'
 
const axios = Axios.create({
    baseURL: 'http://localhost:8000',
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
    },
    withCredentials: true,
})
 
export default axios

Axiosを使うときは基本このファイルと通すことになります。

次に、Laravelで作成した、hello API確認用のページを作成します。

client/src/pages/hello.tsx

import type { NextPage } from 'next'
import useSWR from 'swr'
import axios from '@/libs/axios'
 
const Hello: NextPage = () => {
    const { data, error } = useSWR('/api/hello', () =>
    axios
        .get('/api/hello')
        .then((res: any) => res.data)
    )
     
    if (error) return エラーが発生しました
    if (!data) return 読み込み中
    return (
   
        ようこそ
        {data}
    
    )
}
 
export default Hello

Next.jsのビルドインサーバーを起動します。

Laravelの方も起動したままにしますので、もうひとつターミナルを開きましょう。

$ cd client
$ yarn dev

下記にアクセスしてLaravelで設定した文字「Hello Next.js」が表示されることを確認してください。

Laravelのpublicディレクトリにビルド

ここは最終的にどのような環境で運用するかにもよると思うのですが、今回はNext.jsのビルドをLaravelのpublic

ディレクトリにしてみます。

Laravelのpublicディレクトリから必要なファイルをNext.jsのpublicにコピーします。

$ cp api/public/index.php client/public/index.php
$ cp api/public/.htaccess client/public/.htaccess

package.json

の

build

を編集して書き出し先のディレクトリを変更します。

client/package.json

"scripts": {
    "dev": "next dev",
    "build": "next build && next export -o ../api/public",
    "start": "next start",
    "lint": "next lint"
},

api/public

に書き出されていることを確認してください。

トップページにアクセスするとLaravelのwebcomeページが表示されるので、index.htmlが表示されるように

ルートを変更します。

web.php

を下記のようにします。

api/routes/web.php

Route::get('/', function () {
    return \File::get(public_path() . '/index.html');
});

LaravelのビルドインサーバーにアクセスしてNext.jsで作成したファイルが表示されることを確認できれば完成です。

http://localhost:8000/hello.html