如何在一个网站上集成Laravel API和Next.js前端

wz8daaqr  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(163)

我使用Laravel构建API,Next.js作为前端。API由A开发,前端(Next.js)由B开发。请指导我如何合并这两个文件在一个网站上运行。

mnemlml8

mnemlml81#

这是相当简单的没有太难
首先,您需要配置Laravel API路由以前缀/api。举例来说:

Route::prefix('api')->group(function() {
  Route::apiResource('posts', PostController::class);
});

然后设置Next.js应用程序。确保为API路由配置next.config.js

module.exports = {
  basePath: '/next',
  reactStrictMode: true,

  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '/api/:path*'  
      }
    ]
  }
}

接下来,Next.js页面(你看到我在那里做了什么吗😁)向/api端点发出API请求。举例来说:

export async function getServerSideProps() {
  const res = await fetch('/api/posts');
  const posts = await res.json();

  return {
    props: {
      posts
    }
  }
}

然后你需要做的是分别部署Laravel和Next.js应用- Laravel到root,Next.js到/next
现在配置Web服务器以在root服务Laravel的public,并在/next服务Next.js build输出
在Laravel中设置CORS头以允许来自Next.js的请求
最后,配置API身份验证,然后您就可以自己操作了
好了,现在你应该都准备好了(确保正确地前缀Laravel路由,配置Next.js路由,并将它们部署到同一个域上的不同路径),这就是它的关键所在。

相关问题