🍩

Next.js + Laravel 8 の準備編

2 min read

概要:

Laravel 8 で、Next.jsをフロントにする構成の準備編になります。

  • Laravel公式サポートでは無いようで。非公式的な組合せのようですが。

参考コードが公開されていた為、試してみました。


構成

  • Laravel 8
  • next.js 11
  • typescript 4.4

関連

https://www.webopixel.net/php/1724.html
  • フロント側

https://github.com/taylorotwell/next-example-frontend

準備

  • バックエンド/ laravelの設定は、上記参考にしました。詳細は省略します

  • next.jsの修正

tsconfig.json

  "compilerOptions": {
    // ...
    "baseUrl": "src/",
    "paths": {
      "@/*": ["./*"]
    }    
  },
  • pages/ とstyles をsrcに移動します

  • npm add

yarn add swr
yarn add axios
  • next.config.js

API_URL: laravel ルートをconfigに設定

next.config.js
module.exports = {
  env: {
      // ....
    API_URL : 'http://localhost:8000',
  },  
}

  • src/libs/axios.ts
axios.ts
import Axios from 'axios'
 
const axios = Axios.create({
    baseURL: process.env.API_URL,
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
    },
    withCredentials: true,
})
 
export default axios


  • Laravel apiの準備

localhost:8000/api/hello 、で文字を出力
routes/api.php

api.php
Route::get('/hello', function () {
    return 'Hello Next.js, from Laravel API';
});

  • apiから、データ取得

/src/pages/hello.tsx

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 <div>エラーが発生しました</div>
  if (!data) return <div>読み込み中</div>
  return (
  <div>
      <h1>ようこそ, next.js</h1>
      <hr />
      <p>{data}-1234</p>
  </div>
  )
}
 
export default Hello
  • localhost:3000/hello を開くと、Laravel api出力を、

取得データの表示ができました。


参考のコード

https://github.com/kuc-arc-f/next11_lara_1

まとめ

  • 今回は、nextjsから GETのみでしたが。POST通信も可能でしたので

    ある程度、next.jsから Laravelの機能を使う事は可能みたいです。

....

Discussion

ログインするとコメントできます