🍩

Next.js + Laravel 8 の準備編

2021/12/10に公開

Laravel

Next.js

Node.js

tech

概要:

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

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

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

構成

Laravel 8
next.js 11
typescript 4.4

準備

バックエンド/ 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出力を、

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

参考のコード

まとめ

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

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

....

Next.js + Laravel 8 の準備編

概要:

構成

関連

準備

参考のコード

まとめ

Discussion