{"id":2679,"date":"2025-03-24T08:46:49","date_gmt":"2025-03-23T23:46:49","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=2679"},"modified":"2025-03-24T08:47:17","modified_gmt":"2025-03-23T23:47:17","slug":"laravel%e3%81%a8next-js%e3%81%a7%e4%bd%9c%e3%82%8b%e6%9c%80%e6%96%b0web%e9%96%8b%e7%99%ba%e3%82%ac%e3%82%a4%e3%83%892024%ef%bc%9a%e5%8a%b9%e7%8e%87%e7%9a%84%e3%81%aa%e7%b5%b1%e5%90%88%e3%81%a8","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=2679","title":{"rendered":"Laravel\u3068Next.js\u3067\u4f5c\u308b\u6700\u65b0Web\u958b\u767a\u30ac\u30a4\u30c92024\uff1a\u52b9\u7387\u7684\u306a\u7d71\u5408\u3068\u5b9f\u88c5\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">Laravel\u3068Next.js\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u6ce8\u76ee\u3055\u308c\u308b\u7406\u7531<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u30e2\u30c0\u30f3\u306aWeb\u958b\u767a\u306b\u304a\u3051\u308bLaravel\u3068Next.js\u306e\u5f79\u5272<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u306b\u304a\u3051\u308b2\u3064\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u76f8\u4e57\u52b9\u679c<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">\u74b0\u5883\u69cb\u7bc9\u304b\u3089\u59cb\u3081\u308bLaravel\u00d7Next.js\u958b\u767a<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-8\">API\u30eb\u30fc\u30c8\u306e\u8a2d\u5b9a\u3068CORS\u5bfe\u7b56\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-13\">Laravel\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068Next.js\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u7d71\u5408\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-14\">REST API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u8a2d\u8a08\u3068\u5b9f\u88c5<\/a>      <\/li>      <li>        <a href=\"#i-18\">Next.js\u3067\u306e\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u30f3\u30b0\u6226\u7565<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-21\">\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\u306e\u69cb\u7bc9\u3068\u7d71\u5408\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-26\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-27\">\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u3068\u30c7\u30fc\u30bf\u306e\u6700\u9069\u5316\u624b\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-30\">SSR\u3068SSG\u306e\u9069\u5207\u306a\u4f7f\u3044\u5206\u3051\u65b9<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-33\">\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-36\">\u5b9f\u8df5\u7684\u306a\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30ac\u30a4\u30c9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-37\">\u672c\u756a\u74b0\u5883\u306e\u69cb\u7bc9\u3068\u8a2d\u5b9a\u306e\u30dd\u30a4\u30f3\u30c8<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-40\">CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-43\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-44\">\u4e00\u822c\u7684\u306a\u554f\u984c\u3068\u89e3\u6c7a\u30a2\u30d7\u30ed\u30fc\u30c1<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-48\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u7279\u5b9a\u3068\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-51\">\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3068\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-52\">\u3055\u3089\u306a\u308b\u5b66\u7fd2\u306e\u305f\u3081\u306e\u30ed\u30fc\u30c9\u30de\u30c3\u30d7<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-55\">\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3068\u30b5\u30dd\u30fc\u30c8\u60c5\u5831<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">Laravel\u3068Next.js\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u6ce8\u76ee\u3055\u308c\u308b\u7406\u7531<\/h2>\n\n\n\n<p>\u8fd1\u5e74\u306eWeb\u958b\u767a\u306b\u304a\u3044\u3066\u3001Laravel\u3068Next.js\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u6ce8\u76ee\u3092\u96c6\u3081\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u7d44\u307f\u5408\u308f\u305b\u306f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u5805\u7262\u6027\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u67d4\u8edf\u6027\u3092\u517c\u306d\u5099\u3048\u305f\u7406\u60f3\u7684\u306a\u958b\u767a\u30b9\u30bf\u30c3\u30af\u3068\u3057\u3066\u8a55\u4fa1\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u6301\u3064\u5f37\u307f\u3092\u6700\u5927\u9650\u306b\u6d3b\u304b\u3057\u306a\u304c\u3089\u3001\u30e2\u30c0\u30f3\u306aWeb\u958b\u767a\u306e\u8ab2\u984c\u306b\u52b9\u679c\u7684\u306b\u5bfe\u5fdc\u3067\u304d\u308b\u7406\u7531\u3092\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u30e2\u30c0\u30f3\u306aWeb\u958b\u767a\u306b\u304a\u3051\u308bLaravel\u3068Next.js\u306e\u5f79\u5272<\/h3>\n\n\n\n<p>Laravel\u3068Next.js\u306f\u3001\u305d\u308c\u305e\u308c\u304c\u7570\u306a\u308b\u9818\u57df\u3067\u5353\u8d8a\u3057\u305f\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\uff1a<\/p>\n\n\n<div id=\"id-937df206-a644-40cd-8940-61ae078c1b57\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/th><th>\u4e3b\u306a\u5f79\u5272<\/th><th>\u7279\u5fb4\u7684\u306a\u6a5f\u80fd<\/th><\/tr><\/thead><tbody><tr><td>Laravel<\/td><td>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u51e6\u7406<\/td><td>\u2013 \u5805\u7262\u306aORM\uff08Eloquent\uff09<br>\u2013 \u5145\u5b9f\u3057\u305f\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0<br>\u2013 \u30ad\u30e3\u30c3\u30b7\u30e5\u7ba1\u7406<br>\u2013 \u30b8\u30e7\u30d6\u30ad\u30e5\u30fc<\/td><\/tr><tr><td>Next.js<\/td><td>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u51e6\u7406<\/td><td>\u2013 \u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\uff08SSR\uff09<br>\u2013 \u9759\u7684\u30b5\u30a4\u30c8\u751f\u6210\uff08SSG\uff09<br>\u2013 \u81ea\u52d5\u7684\u306a\u30b3\u30fc\u30c9\u5206\u5272<br>\u2013 \u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p>\u3053\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u9078\u3070\u308c\u308b\u4e3b\u306a\u7406\u7531\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u6700\u5927\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel\u306e\u5145\u5b9f\u3057\u305f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30c4\u30fc\u30eb\u7fa4\u3068\u3001Next.js\u306e\u6700\u65b0\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u6a5f\u80fd\u3092\u540c\u6642\u306b\u6d3b\u7528\u3067\u304d\u307e\u3059<\/li>\n\n\n\n<li>\u305d\u308c\u305e\u308c\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u6301\u3064\u958b\u767a\u8005\u4f53\u9a13\uff08DX\uff09\u306e\u826f\u3055\u3092\u640d\u306a\u3046\u3053\u3068\u306a\u304f\u958b\u767a\u304c\u53ef\u80fd\u3067\u3059<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next.js\u306eSSR\/SSG\u6a5f\u80fd\u306b\u3088\u308a\u3001\u521d\u671f\u8868\u793a\u306e\u9ad8\u901f\u5316\u304c\u5b9f\u73fe\u3067\u304d\u307e\u3059<\/li>\n\n\n\n<li>Laravel\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30b7\u30b9\u30c6\u30e0\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u3055\u3089\u306a\u308b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a\u304c\u53ef\u80fd\u3067\u3059<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u306b\u304a\u3051\u308b2\u3064\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u76f8\u4e57\u52b9\u679c<\/h3>\n\n\n\n<p>Laravel\u3068Next.js\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u5f97\u3089\u308c\u308b\u76f8\u4e57\u52b9\u679c\u306f\u3001\u4ee5\u4e0b\u306e\u89b3\u70b9\u304b\u3089\u7279\u306b\u91cd\u8981\u3067\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Laravel\u3067\u306e\u5b89\u5168\u306aAPI\u5b9f\u88c5\u4f8b\n   public function authenticate(Request $request)\n   {\n       $credentials = $request-&gt;validate([\n           'email' =&gt; ['required', 'email'],\n           'password' =&gt; ['required'],\n       ]);\n\n       if (Auth::attempt($credentials)) {\n           $token = $request-&gt;user()-&gt;createToken('api-token');\n           return ['token' =&gt; $token-&gt;plainTextToken];\n       }\n   }<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Next.js\u3067\u306e\u30c8\u30fc\u30af\u30f3\u7ba1\u7406\u4f8b\n   const fetchData = async () =&gt; {\n     const response = await fetch('\/api\/data', {\n       headers: {\n         'Authorization': `Bearer ${localStorage.getItem('token')}`\n       }\n     });\n     return response.json();\n   };<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel\u306eEloquent ORM\u3068Next.js\u306eSWR\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u53d6\u5f97\u3068\u66f4\u65b0\u304c\u53ef\u80fd<\/li>\n\n\n\n<li>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c7\u30fc\u30bf\u66f4\u65b0\u3068\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u7d71\u5408\u7ba1\u7406\u304c\u5b9f\u73fe\u53ef\u80fd<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u751f\u7523\u6027\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel Sail\u3092\u4f7f\u7528\u3057\u305f\u958b\u767a\u74b0\u5883\u306e\u6a19\u6e96\u5316<\/li>\n\n\n\n<li>Next.js\u306e\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3068\u306e\u9023\u643a\u306b\u3088\u308b\u9ad8\u901f\u306a\u958b\u767a\u30b5\u30a4\u30af\u30eb<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3001Laravel\u3068Next.js\u306e\u7d44\u307f\u5408\u308f\u305b\u306f\u3001\u73fe\u4ee3\u306eWeb\u958b\u767a\u304c\u76f4\u9762\u3059\u308b\u69d8\u3005\u306a\u8ab2\u984c\u306b\u5bfe\u3057\u3066\u3001\u52b9\u679c\u7684\u306a\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u7279\u306b\u3001\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u3084\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u5b9f\u88c5\u306b\u304a\u3044\u3066\u3001\u305d\u306e\u771f\u4fa1\u3092\u767a\u63ee\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">\u74b0\u5883\u69cb\u7bc9\u304b\u3089\u59cb\u3081\u308bLaravel\u00d7Next.js\u958b\u767a<\/h2>\n\n\n\n<p>\u52b9\u7387\u7684\u306a\u958b\u767a\u3092\u884c\u3046\u305f\u3081\u306b\u306f\u3001\u9069\u5207\u306a\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001Laravel\u3068Next.js\u306e\u958b\u767a\u74b0\u5883\u3092 Docker \u3092\u4f7f\u7528\u3057\u3066\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\u3068\u3001\u4e21\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u9593\u306e\u9023\u643a\u306b\u5fc5\u8981\u306a\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-5\">1. \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u57fa\u672c\u69cb\u9020<\/h4>\n\n\n\n<p>\u6700\u521d\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u57fa\u672c\u69cb\u9020\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a2d\u8a08\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">project-root\/\n\u251c\u2500\u2500 backend\/          # Laravel \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\n\u2514\u2500\u2500 frontend\/         # Next.js \u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-6\">2. \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\uff08Laravel\uff09\u306e\u74b0\u5883\u69cb\u7bc9<\/h4>\n\n\n\n<p>\u307e\u305a\u3001Docker Compose\u3092\u4f7f\u7528\u3057\u3066Laravel\u74b0\u5883\u3092\u69cb\u7bc9\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># docker-compose.yml\nversion: '3'\nservices:\n  app:\n    build:\n      context: .\/backend\n      dockerfile: Dockerfile\n    volumes:\n      - .\/backend:\/var\/www\/html\n    ports:\n      - \"8000:80\"\n    depends_on:\n      - db\n\n  db:\n    image: mysql:8.0\n    environment:\n      MYSQL_DATABASE: laravel\n      MYSQL_ROOT_PASSWORD: your_root_password\n      MYSQL_PASSWORD: your_password\n      MYSQL_USER: laravel_user\n    volumes:\n      - dbdata:\/var\/lib\/mysql\n    ports:\n      - \"3306:3306\"\n\nvolumes:\n  dbdata:<\/pre>\n\n\n\n<p>Laravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u521d\u671f\u5316\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Laravel \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\ncomposer create-project laravel\/laravel backend\ncd backend\n\n# \u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\ncomposer require laravel\/sanctum    # API\u8a8d\u8a3c\u7528\ncomposer require fruitcake\/laravel-cors  # CORS\u5bfe\u7b56\u7528<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-7\">3. \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\uff08Next.js\uff09\u306e\u74b0\u5883\u69cb\u7bc9<\/h4>\n\n\n\n<p>Next.js\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u521d\u671f\u5316\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Next.js\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\nnpx create-next-app@latest frontend\ncd frontend\n\n# \u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install axios @tanstack\/react-query<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">API\u30eb\u30fc\u30c8\u306e\u8a2d\u5b9a\u3068CORS\u5bfe\u7b56\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-9\">1. Laravel\u5074\u306eCORS\u8a2d\u5b9a<\/h4>\n\n\n\n<p><code>config\/cors.php<\/code> \u306e\u8a2d\u5b9a\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">return [\n    'paths' =&gt; ['api\/*'],\n    'allowed_methods' =&gt; ['*'],\n    'allowed_origins' =&gt; ['http:\/\/localhost:3000'], \/\/ Next.js\u306e\u958b\u767a\u30b5\u30fc\u30d0\u30fcURL\n    'allowed_origins_patterns' =&gt; [],\n    'allowed_headers' =&gt; ['*'],\n    'exposed_headers' =&gt; [],\n    'max_age' =&gt; 0,\n    'supports_credentials' =&gt; true,\n];<\/pre>\n\n\n\n<p><code>app\/Http\/Kernel.php<\/code> \u306b\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u8ffd\u52a0\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">protected $middleware = [\n    \/\/ ...\n    \\Fruitcake\\Cors\\HandleCors::class,\n];\n\nprotected $middlewareGroups = [\n    'api' =&gt; [\n        \\Laravel\\Sanctum\\Http\\Middleware\\EnsureFrontendRequestsAreStateful::class,\n        'throttle:api',\n        \\Illuminate\\Routing\\Middleware\\SubstituteBindings::class,\n    ],\n];<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-10\">2. Next.js\u5074\u306e\u8a2d\u5b9a<\/h4>\n\n\n\n<p><code>next.config.js<\/code> \u306e\u8a2d\u5b9a\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  reactStrictMode: true,\n  async rewrites() {\n    return [\n      {\n        source: '\/api\/:path*',\n        destination: 'http:\/\/localhost:8000\/api\/:path*',\n      },\n    ]\n  },\n}\n\nmodule.exports = nextConfig<\/pre>\n\n\n\n<p>API\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u8a2d\u5b9a\uff08<code>lib\/axios.ts<\/code>\uff09\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import axios from 'axios';\n\nconst apiClient = axios.create({\n  baseURL: process.env.NEXT_PUBLIC_API_URL || 'http:\/\/localhost:8000',\n  headers: {\n    'X-Requested-With': 'XMLHttpRequest',\n    'Content-Type': 'application\/json',\n  },\n  withCredentials: true,\n});\n\nexport default apiClient;<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-11\">3. \u52d5\u4f5c\u78ba\u8a8d<\/h4>\n\n\n\n<p>\u74b0\u5883\u69cb\u7bc9\u304c\u6b63\u3057\u304f\u5b8c\u4e86\u3057\u305f\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u30c6\u30b9\u30c8API\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u5b9f\u88c5\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Laravel\u5074: routes\/api.php\nRoute::get('\/health-check', function () {\n    return response()-&gt;json([\n        'status' =&gt; 'ok',\n        'message' =&gt; 'API is working correctly'\n    ]);\n});<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Next.js\u5074: pages\/index.tsx\nimport { useEffect, useState } from 'react'\nimport apiClient from '..\/lib\/axios'\n\nexport default function Home() {\n  const [status, setStatus] = useState&lt;string&gt;('')\n\n  useEffect(() =&gt; {\n    const checkHealth = async () =&gt; {\n      try {\n        const response = await apiClient.get('\/api\/health-check')\n        setStatus(response.data.message)\n      } catch (error) {\n        setStatus('Error connecting to API')\n      }\n    }\n    checkHealth()\n  }, [])\n\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;API Status: {status}&lt;\/h1&gt;\n    &lt;\/div&gt;\n  )\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-12\">\u958b\u767a\u74b0\u5883\u306e\u8d77\u52d5\u624b\u9806<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u8d77\u52d5\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cd backend\ndocker-compose up -d\ndocker-compose exec app php artisan migrate<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u8d77\u52d5\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cd frontend\nnpm run dev<\/pre>\n\n\n\n<p>\u3053\u308c\u3067\u3001Laravel\uff08\u30dd\u30fc\u30c88000\uff09\u3068Next.js\uff08\u30dd\u30fc\u30c83000\uff09\u306e\u958b\u767a\u74b0\u5883\u304c\u6574\u3044\u3001\u76f8\u4e92\u306b\u901a\u4fe1\u53ef\u80fd\u306a\u72b6\u614b\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-13\">Laravel\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068Next.js\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u7d71\u5408\u624b\u9806<\/h2>\n\n\n\n<p>Laravel\u3068Next.js\u3092\u52b9\u679c\u7684\u306b\u7d71\u5408\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u9069\u5207\u306aAPI\u8a2d\u8a08\u3068\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u30f3\u30b0\u6226\u7565\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u5b9f\u8df5\u7684\u306a\u7d71\u5408\u624b\u9806\u3068\u5177\u4f53\u7684\u306a\u5b9f\u88c5\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">REST API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u8a2d\u8a08\u3068\u5b9f\u88c5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-15\">1. API\u30ea\u30bd\u30fc\u30b9\u306e\u4f5c\u6210<\/h4>\n\n\n\n<p>\u307e\u305a\u3001Laravel\u5074\u3067API\u30ea\u30bd\u30fc\u30b9\u3092\u4f5c\u6210\u3057\u3001\u4e00\u8cab\u6027\u306e\u3042\u308b\u30ec\u30b9\u30dd\u30f3\u30b9\u5f62\u5f0f\u3092\u5b9a\u7fa9\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Http\/Resources\/UserResource.php\nclass UserResource extends JsonResource\n{\n    public function toArray($request)\n    {\n        return [\n            'id' =&gt; $this-&gt;id,\n            'name' =&gt; $this-&gt;name,\n            'email' =&gt; $this-&gt;email,\n            'created_at' =&gt; $this-&gt;created_at-&gt;toISOString(),\n            'updated_at' =&gt; $this-&gt;updated_at-&gt;toISOString(),\n        ];\n    }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-16\">2. API\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u5b9f\u88c5<\/h4>\n\n\n\n<p>RESTful\u539f\u5247\u306b\u5f93\u3063\u305fAPI\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u5b9f\u88c5\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Http\/Controllers\/Api\/UserController.php\nclass UserController extends Controller\n{\n    public function index()\n    {\n        return UserResource::collection(User::paginate(10));\n    }\n\n    public function store(StoreUserRequest $request)\n    {\n        $user = User::create($request-&gt;validated());\n        return new UserResource($user);\n    }\n\n    public function show(User $user)\n    {\n        return new UserResource($user);\n    }\n\n    \/\/ \u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u4f8b\n    public function update(UpdateUserRequest $request, User $user)\n    {\n        try {\n            $user-&gt;update($request-&gt;validated());\n            return new UserResource($user);\n        } catch (\\Exception $e) {\n            return response()-&gt;json([\n                'message' =&gt; 'Update failed',\n                'error' =&gt; $e-&gt;getMessage()\n            ], 500);\n        }\n    }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-17\">3. API\u4f8b\u5916\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/h4>\n\n\n\n<p>\u30b0\u30ed\u30fc\u30d0\u30eb\u306a\u4f8b\u5916\u30cf\u30f3\u30c9\u30e9\u30fc\u3092\u8a2d\u5b9a\u3057\u3066\u3001\u4e00\u8cab\u6027\u306e\u3042\u308b\u30a8\u30e9\u30fc\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u8fd4\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Exceptions\/Handler.php\npublic function render($request, Throwable $exception)\n{\n    if ($request-&gt;expectsJson()) {\n        if ($exception instanceof ValidationException) {\n            return response()-&gt;json([\n                'message' =&gt; 'The given data was invalid.',\n                'errors' =&gt; $exception-&gt;errors(),\n            ], 422);\n        }\n\n        if ($exception instanceof ModelNotFoundException) {\n            return response()-&gt;json([\n                'message' =&gt; 'Resource not found.',\n            ], 404);\n        }\n    }\n\n    return parent::render($request, $exception);\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">Next.js\u3067\u306e\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u30f3\u30b0\u6226\u7565<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-19\">1. \u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306e\u5b9f\u88c5<\/h4>\n\n\n\n<p>React Query\u3068Axios\u3092\u4f7f\u7528\u3057\u3066\u3001\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u30f3\u30b0\u3092\u5b9f\u88c5\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ hooks\/useUsers.ts\nimport { useQuery, useMutation, useQueryClient } from '@tanstack\/react-query'\nimport apiClient from '..\/lib\/axios'\n\nexport const useUsers = (page = 1) =&gt; {\n  return useQuery(['users', page], async () =&gt; {\n    const { data } = await apiClient.get(`\/api\/users?page=${page}`)\n    return data\n  })\n}\n\nexport const useCreateUser = () =&gt; {\n  const queryClient = useQueryClient()\n\n  return useMutation(\n    (userData: any) =&gt; apiClient.post('\/api\/users', userData),\n    {\n      onSuccess: () =&gt; {\n        queryClient.invalidateQueries(['users'])\n      },\n    }\n  )\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-20\">2. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306e\u5b9f\u88c5<\/h4>\n\n\n\n<p>\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u30f3\u30b0\u3092\u5b9f\u969b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u4f7f\u7528\u3059\u308b\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ components\/UserList.tsx\nimport { useUsers, useCreateUser } from '..\/hooks\/useUsers'\n\nexport default function UserList() {\n  const { data, isLoading, error } = useUsers()\n  const createUser = useCreateUser()\n\n  if (isLoading) return &lt;div&gt;Loading...&lt;\/div&gt;\n  if (error) return &lt;div&gt;Error loading users&lt;\/div&gt;\n\n  return (\n    &lt;div&gt;\n      {data.data.map((user: any) =&gt; (\n        &lt;div key={user.id}&gt;\n          &lt;h3&gt;{user.name}&lt;\/h3&gt;\n          &lt;p&gt;{user.email}&lt;\/p&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/div&gt;\n  )\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-21\">\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\u306e\u69cb\u7bc9\u3068\u7d71\u5408\u65b9\u6cd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-22\">1. Laravel Sanctum\u306e\u8a2d\u5b9a<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ config\/sanctum.php\nreturn [\n    'stateful' =&gt; explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(\n        '%s%s',\n        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',\n        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''\n    ))),\n    'guard' =&gt; ['web'],\n    'expiration' =&gt; null,\n    'middleware' =&gt; [\n        'verify_csrf_token' =&gt; App\\Http\\Middleware\\VerifyCsrfToken::class,\n        'encrypt_cookies' =&gt; App\\Http\\Middleware\\EncryptCookies::class,\n    ],\n];<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-23\">2. \u8a8d\u8a3c\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u5b9f\u88c5<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Http\/Controllers\/Api\/AuthController.php\nclass AuthController extends Controller\n{\n    public function login(Request $request)\n    {\n        $credentials = $request-&gt;validate([\n            'email' =&gt; ['required', 'email'],\n            'password' =&gt; ['required'],\n        ]);\n\n        if (Auth::attempt($credentials)) {\n            $user = Auth::user();\n            $token = $user-&gt;createToken('auth-token')-&gt;plainTextToken;\n\n            return response()-&gt;json([\n                'token' =&gt; $token,\n                'user' =&gt; new UserResource($user),\n            ]);\n        }\n\n        return response()-&gt;json([\n            'message' =&gt; 'Invalid credentials',\n        ], 401);\n    }\n\n    public function logout(Request $request)\n    {\n        $request-&gt;user()-&gt;currentAccessToken()-&gt;delete();\n        return response()-&gt;json(['message' =&gt; 'Logged out successfully']);\n    }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-24\">3. Next.js\u3067\u306e\u8a8d\u8a3c\u72b6\u614b\u7ba1\u7406<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ hooks\/useAuth.ts\nimport { create } from 'zustand'\nimport apiClient from '..\/lib\/axios'\n\ninterface AuthState {\n  user: any | null\n  token: string | null\n  login: (credentials: { email: string; password: string }) =&gt; Promise&lt;void&gt;\n  logout: () =&gt; Promise&lt;void&gt;\n}\n\nexport const useAuth = create&lt;AuthState&gt;((set) =&gt; ({\n  user: null,\n  token: null,\n  login: async (credentials) =&gt; {\n    const { data } = await apiClient.post('\/api\/login', credentials)\n    set({ user: data.user, token: data.token })\n    apiClient.defaults.headers.common['Authorization'] = `Bearer ${data.token}`\n  },\n  logout: async () =&gt; {\n    await apiClient.post('\/api\/logout')\n    set({ user: null, token: null })\n    delete apiClient.defaults.headers.common['Authorization']\n  },\n}))<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-25\">4. \u8a8d\u8a3c\u72b6\u614b\u306b\u57fa\u3065\u304f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u4fdd\u8b77<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ components\/PrivateRoute.tsx\nimport { useEffect } from 'react'\nimport { useRouter } from 'next\/router'\nimport { useAuth } from '..\/hooks\/useAuth'\n\nexport default function PrivateRoute({ children }: { children: React.ReactNode }) {\n  const router = useRouter()\n  const { user } = useAuth()\n\n  useEffect(() =&gt; {\n    if (!user) {\n      router.push('\/login')\n    }\n  }, [user, router])\n\n  if (!user) {\n    return null\n  }\n\n  return &lt;&gt;{children}&lt;\/&gt;\n}<\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001Laravel\u3068Next.js\u306e\u9593\u3067\u5b89\u5168\u304b\u3064\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u306e\u3084\u308a\u53d6\u308a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u7279\u306b\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\u306b\u3064\u3044\u3066\u306f\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3092\u8003\u616e\u3057\u306a\u304c\u3089\u3001\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u3092\u640d\u306a\u308f\u306a\u3044\u5b9f\u88c5\u3092\u5fc3\u304c\u3051\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-26\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n<p>Laravel\u3068Next.js\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u5927\u9650\u306b\u5f15\u304d\u51fa\u3059\u306b\u306f\u3001\u305d\u308c\u305e\u308c\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7279\u6027\u3092\u7406\u89e3\u3057\u3001\u9069\u5207\u306a\u6700\u9069\u5316\u6226\u7565\u3092\u5b9f\u88c5\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-27\">\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u3068\u30c7\u30fc\u30bf\u306e\u6700\u9069\u5316\u624b\u6cd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-28\">1. Laravel\u3067\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u6700\u9069\u5316<\/h4>\n\n\n\n<p>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30af\u30a8\u30ea\u306e\u6700\u9069\u5316\u3068\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u5b9f\u88c5\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Http\/Controllers\/Api\/ProductController.php\nclass ProductController extends Controller\n{\n    public function index()\n    {\n        \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u30ad\u30fc\u306e\u751f\u6210\uff08\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u8003\u616e\uff09\n        $cacheKey = 'products:' . request()-&gt;getQueryString();\n\n        return Cache::remember($cacheKey, 3600, function () {\n            return Product::with(['category', 'tags'])\n                -&gt;when(request('category'), function ($query, $category) {\n                    return $query-&gt;where('category_id', $category);\n                })\n                -&gt;latest()\n                -&gt;paginate(12);\n        });\n    }\n\n    \/\/ N+1\u554f\u984c\u3092\u56de\u907f\u3059\u308b\u30af\u30a8\u30ea\u306e\u6700\u9069\u5316\u4f8b\n    public function show(Product $product)\n    {\n        return Cache::remember('product:' . $product-&gt;id, 3600, function () use ($product) {\n            return $product-&gt;load([\n                'category',\n                'reviews' =&gt; function ($query) {\n                    $query-&gt;latest()-&gt;take(5);\n                },\n                'tags'\n            ]);\n        });\n    }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-29\">2. Redis\u3092\u4f7f\u7528\u3057\u305f\u9ad8\u5ea6\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ config\/cache.php\n'redis' =&gt; [\n    'client' =&gt; env('REDIS_CLIENT', 'phpredis'),\n    'default' =&gt; [\n        'host' =&gt; env('REDIS_HOST', '127.0.0.1'),\n        'password' =&gt; env('REDIS_PASSWORD'),\n        'port' =&gt; env('REDIS_PORT', 6379),\n        'database' =&gt; env('REDIS_DB', 0),\n    ],\n    'cache' =&gt; [\n        'host' =&gt; env('REDIS_HOST', '127.0.0.1'),\n        'password' =&gt; env('REDIS_PASSWORD'),\n        'port' =&gt; env('REDIS_PORT', 6379),\n        'database' =&gt; env('REDIS_CACHE_DB', 1),\n    ],\n],<\/pre>\n\n\n\n<p>Redis\u3092\u4f7f\u7528\u3057\u305f\u30ad\u30e3\u30c3\u30b7\u30e5\u30b5\u30fc\u30d3\u30b9\u306e\u5b9f\u88c5\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Services\/CacheService.php\nclass CacheService\n{\n    public function getOrSetCache($key, $callback, $ttl = 3600)\n    {\n        if (Redis::exists($key)) {\n            return json_decode(Redis::get($key), true);\n        }\n\n        $data = $callback();\n        Redis::setex($key, $ttl, json_encode($data));\n\n        return $data;\n    }\n\n    public function invalidateCache($pattern)\n    {\n        $keys = Redis::keys($pattern);\n        if (!empty($keys)) {\n            Redis::del($keys);\n        }\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-30\">SSR\u3068SSG\u306e\u9069\u5207\u306a\u4f7f\u3044\u5206\u3051\u65b9<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-31\">1. Next.js\u3067\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6226\u7565<\/h4>\n\n\n\n<p>\u30da\u30fc\u30b8\u306e\u7279\u6027\u306b\u5fdc\u3058\u305f\u6700\u9069\u306a\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u65b9\u5f0f\u306e\u9078\u629e\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ pages\/products\/[id].tsx - SSR example\nexport const getServerSideProps: GetServerSideProps = async (context) =&gt; {\n  const { id } = context.params as { id: string }\n\n  try {\n    const product = await apiClient.get(`\/api\/products\/${id}`)\n\n    return {\n      props: {\n        product: product.data,\n        lastUpdated: new Date().toISOString(),\n      },\n    }\n  } catch (error) {\n    return {\n      notFound: true,\n    }\n  }\n}\n\n\/\/ pages\/categories\/[slug].tsx - SSG with revalidation\nexport const getStaticProps: GetStaticProps = async ({ params }) =&gt; {\n  const { slug } = params as { slug: string }\n\n  try {\n    const category = await apiClient.get(`\/api\/categories\/${slug}`)\n\n    return {\n      props: {\n        category: category.data,\n      },\n      revalidate: 60, \/\/ 1\u5206\u3054\u3068\u306b\u518d\u751f\u6210\n    }\n  } catch (error) {\n    return {\n      notFound: true,\n    }\n  }\n}\n\nexport const getStaticPaths: GetStaticPaths = async () =&gt; {\n  const categories = await apiClient.get('\/api\/categories')\n\n  const paths = categories.data.map((category: any) =&gt; ({\n    params: { slug: category.slug },\n  }))\n\n  return {\n    paths,\n    fallback: 'blocking',\n  }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-32\">2. \u9069\u5207\u306a\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u65b9\u5f0f\u306e\u9078\u629e\u30ac\u30a4\u30c9<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u8868\u306b\u57fa\u3065\u3044\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u65b9\u5f0f\u3092\u9078\u629e\u3057\u307e\u3059\uff1a<\/p>\n\n\n<div id=\"id-1b55824e-9506-4a29-af3a-ebdbaefc81bc\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30b3\u30f3\u30c6\u30f3\u30c4\u30bf\u30a4\u30d7<\/th><th>\u63a8\u5968\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u65b9\u5f0f<\/th><th>\u7406\u7531<\/th><\/tr><\/thead><tbody><tr><td>\u5546\u54c1\u4e00\u89a7\u30da\u30fc\u30b8<\/td><td>SSG + ISR<\/td><td>\u30c7\u30fc\u30bf\u66f4\u65b0\u983b\u5ea6\u304c\u4e2d\u7a0b\u5ea6\u3067\u3001\u9ad8\u901f\u306a\u521d\u671f\u8868\u793a\u304c\u91cd\u8981<\/td><\/tr><tr><td>\u5546\u54c1\u8a73\u7d30\u30da\u30fc\u30b8<\/td><td>SSR<\/td><td>\u5728\u5eab\u72b6\u6cc1\u306a\u3069\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u6027\u304c\u91cd\u8981<\/td><\/tr><tr><td>\u30d6\u30ed\u30b0\u8a18\u4e8b<\/td><td>SSG<\/td><td>\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u9759\u7684\u3067\u3001\u66f4\u65b0\u983b\u5ea6\u304c\u4f4e\u3044<\/td><\/tr><tr><td>\u30e6\u30fc\u30b6\u30fc\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9<\/td><td>CSR + SWR<\/td><td>\u500b\u4eba\u30c7\u30fc\u30bf\u3092\u6271\u3044\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u66f4\u65b0\u304c\u5fc5\u8981<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-33\">\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-34\">1. Next.js\u3067\u306e\u30b3\u30fc\u30c9\u5206\u5272<\/h4>\n\n\n\n<p>\u52d5\u7684\u30a4\u30f3\u30dd\u30fc\u30c8\u3092\u4f7f\u7528\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u9045\u5ef6\u30ed\u30fc\u30c9\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ components\/DynamicChart.tsx\nimport dynamic from 'next\/dynamic'\n\nconst Chart = dynamic(() =&gt; import('react-chartjs-2'), {\n  loading: () =&gt; &lt;p&gt;Loading chart...&lt;\/p&gt;,\n  ssr: false, \/\/ \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u306e\u307f\u3067\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\n})\n\n\/\/ \u91cd\u3044\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u52d5\u7684\u30a4\u30f3\u30dd\u30fc\u30c8\nconst HeavyComponent = dynamic(() =&gt; \n  import('heavy-component').then(mod =&gt; mod.HeavyComponent)\n)<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-35\">2. \u30d0\u30f3\u30c9\u30eb\u5206\u6790\u3068\u30b5\u30a4\u30ba\u6700\u9069\u5316<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ next.config.js\nconst withBundleAnalyzer = require('@next\/bundle-analyzer')({\n  enabled: process.env.ANALYZE === 'true',\n})\n\nmodule.exports = withBundleAnalyzer({\n  \/\/ \u305d\u306e\u4ed6\u306e\u8a2d\u5b9a\n  compiler: {\n    \/\/ \u672c\u756a\u74b0\u5883\u3067\u306e\u6700\u9069\u5316\n    removeConsole: process.env.NODE_ENV === 'production',\n  },\n  \/\/ \u753b\u50cf\u6700\u9069\u5316\u306e\u8a2d\u5b9a\n  images: {\n    domains: ['your-image-domain.com'],\n    deviceSizes: [640, 750, 828, 1080, 1200, 1920],\n    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],\n  },\n})<\/pre>\n\n\n\n<p>\u6700\u9069\u5316\u306e\u305f\u3081\u306e\u30a4\u30e1\u30fc\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ components\/OptimizedImage.tsx\nimport Image from 'next\/image'\n\ninterface OptimizedImageProps {\n  src: string\n  alt: string\n  width: number\n  height: number\n  priority?: boolean\n}\n\nexport function OptimizedImage({\n  src,\n  alt,\n  width,\n  height,\n  priority = false,\n}: OptimizedImageProps) {\n  return (\n    &lt;div className=\"relative\"&gt;\n      &lt;Image\n        src={src}\n        alt={alt}\n        width={width}\n        height={height}\n        priority={priority}\n        loading={priority ? 'eager' : 'lazy'}\n        quality={75} \/\/ \u753b\u8cea\u3068\u5bb9\u91cf\u306e\u30d0\u30e9\u30f3\u30b9\u3092\u53d6\u308b\n        placeholder=\"blur\"\n        blurDataURL=\"data:image\/jpeg;base64,\/9j\/4AAQSkZJRg...\"\n      \/&gt;\n    &lt;\/div&gt;\n  )\n}<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u6280\u8853\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5fdc\u7b54\u6027\u3068\u4f7f\u7528\u4f53\u9a13\u3092\u5927\u304d\u304f\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u304c\u91cd\u8981\u306a\u5dee\u5225\u5316\u8981\u56e0\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-36\">\u5b9f\u8df5\u7684\u306a\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30ac\u30a4\u30c9<\/h2>\n\n\n\n<p>Laravel\u3068Next.js\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u672c\u756a\u74b0\u5883\u3078\u306e\u30c7\u30d7\u30ed\u30a4\u3067\u306f\u3001\u4e21\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7279\u6027\u3092\u8003\u616e\u3057\u305f\u9069\u5207\u306a\u8a2d\u5b9a\u3068\u624b\u9806\u304c\u5fc5\u8981\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u5b9f\u8df5\u7684\u306a\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u624b\u9806\u3068CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-37\">\u672c\u756a\u74b0\u5883\u306e\u69cb\u7bc9\u3068\u8a2d\u5b9a\u306e\u30dd\u30a4\u30f3\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-38\">1. Laravel\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30c7\u30d7\u30ed\u30a4\u6e96\u5099<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u672c\u756a\u74b0\u5883\u7528\u306e<code>.env<\/code>\u30d5\u30a1\u30a4\u30eb\u3092\u9069\u5207\u306b\u8a2d\u5b9a\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">APP_ENV=production\nAPP_DEBUG=false\nAPP_URL=https:\/\/api.yourapp.com\n\nDB_CONNECTION=mysql\nDB_HOST=your-production-db-host\nDB_PORT=3306\nDB_DATABASE=your_production_db\nDB_USERNAME=your_production_user\nDB_PASSWORD=your_production_password\n\nCORS_ALLOWED_ORIGINS=https:\/\/yourapp.com\nSESSION_DOMAIN=.yourapp.com\nSANCTUM_STATEFUL_DOMAINS=yourapp.com\n\nCACHE_DRIVER=redis\nSESSION_DRIVER=redis\nQUEUE_CONNECTION=redis<\/pre>\n\n\n\n<p>\u672c\u756a\u74b0\u5883\u7528\u306eNginx\u8a2d\u5b9a\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \/etc\/nginx\/sites-available\/laravel-api.conf\nserver {\n    listen 80;\n    server_name api.yourapp.com;\n    root \/var\/www\/html\/public;\n\n    add_header X-Frame-Options \"SAMEORIGIN\";\n    add_header X-Content-Type-Options \"nosniff\";\n\n    index index.php;\n\n    charset utf-8;\n\n    location \/ {\n        try_files $uri $uri\/ \/index.php?$query_string;\n    }\n\n    location = \/favicon.ico { access_log off; log_not_found off; }\n    location = \/robots.txt  { access_log off; log_not_found off; }\n\n    error_page 404 \/index.php;\n\n    location ~ \\.php$ {\n        fastcgi_pass unix:\/var\/run\/php\/php8.2-fpm.sock;\n        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;\n        include fastcgi_params;\n    }\n\n    location ~ \/\\.(?!well-known).* {\n        deny all;\n    }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-39\">2. Next.js\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u30c7\u30d7\u30ed\u30a4\u8a2d\u5b9a<\/h4>\n\n\n\n<p>Next.js\u7528\u306e\u74b0\u5883\u5909\u6570\u8a2d\u5b9a\uff08<code>.env.production<\/code>\uff09\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">NEXT_PUBLIC_API_URL=https:\/\/api.yourapp.com\nNEXT_PUBLIC_APP_URL=https:\/\/yourapp.com\nNEXT_PUBLIC_ASSET_PREFIX=https:\/\/cdn.yourapp.com<\/pre>\n\n\n\n<p>\u672c\u756a\u30d3\u30eb\u30c9\u6700\u9069\u5316\u306e\u305f\u3081\u306e<code>next.config.js<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  reactStrictMode: true,\n  output: 'standalone',\n  compress: true,\n  poweredByHeader: false,\n\n  \/\/ CDN\u8a2d\u5b9a\n  assetPrefix: process.env.NEXT_PUBLIC_ASSET_PREFIX,\n\n  \/\/ \u753b\u50cf\u6700\u9069\u5316\n  images: {\n    domains: ['api.yourapp.com', 'cdn.yourapp.com'],\n    minimumCacheTTL: 60,\n  },\n\n  \/\/ \u672c\u756a\u74b0\u5883\u7279\u6709\u306e\u8a2d\u5b9a\n  compiler: {\n    removeConsole: process.env.NODE_ENV === 'production',\n  },\n\n  \/\/ \u30d8\u30c3\u30c0\u30fc\u8a2d\u5b9a\n  async headers() {\n    return [\n      {\n        source: '\/:path*',\n        headers: [\n          {\n            key: 'X-DNS-Prefetch-Control',\n            value: 'on'\n          },\n          {\n            key: 'Strict-Transport-Security',\n            value: 'max-age=63072000; includeSubDomains; preload'\n          }\n        ]\n      }\n    ]\n  }\n}\n\nmodule.exports = nextConfig<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-40\">CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\u65b9\u6cd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-41\">1. GitHub Actions\u3092\u4f7f\u7528\u3057\u305fCI\/CD\u8a2d\u5b9a<\/h4>\n\n\n\n<p><code>.github\/workflows\/deploy.yml<\/code>\u306e\u5b9f\u88c5\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">name: Deploy Application\n\non:\n  push:\n    branches: [ main ]\n\njobs:\n  deploy-backend:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions\/checkout@v3\n\n      - name: Setup PHP\n        uses: shivammathur\/setup-php@v2\n        with:\n          php-version: '8.2'\n\n      - name: Install Dependencies\n        run: composer install --no-dev --optimize-autoloader\n\n      - name: Generate Application Key\n        run: php artisan key:generate\n\n      - name: Run Tests\n        run: php artisan test\n\n      - name: Deploy to Production\n        uses: appleboy\/ssh-action@master\n        with:\n          host: ${{ secrets.SSH_HOST }}\n          username: ${{ secrets.SSH_USERNAME }}\n          key: ${{ secrets.SSH_PRIVATE_KEY }}\n          script: |\n            cd \/var\/www\/html\n            git pull origin main\n            composer install --no-dev --optimize-autoloader\n            php artisan migrate --force\n            php artisan config:cache\n            php artisan route:cache\n            php artisan view:cache\n            sudo systemctl restart php8.2-fpm\n            sudo systemctl restart nginx\n\n  deploy-frontend:\n    runs-on: ubuntu-latest\n    needs: deploy-backend\n\n    steps:\n      - uses: actions\/checkout@v3\n\n      - name: Setup Node.js\n        uses: actions\/setup-node@v3\n        with:\n          node-version: '18'\n\n      - name: Install Dependencies\n        run: npm ci\n\n      - name: Build Application\n        run: npm run build\n\n      - name: Deploy to Vercel\n        uses: amondnet\/vercel-action@v20\n        with:\n          vercel-token: ${{ secrets.VERCEL_TOKEN }}\n          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}\n          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}\n          vercel-args: '--prod'<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-42\">2. \u30c7\u30d7\u30ed\u30a4\u5f8c\u306e\u81ea\u52d5\u30c6\u30b9\u30c8\u3068\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0<\/h4>\n\n\n\n<p>\u672c\u756a\u74b0\u5883\u306e\u5065\u5168\u6027\u30c1\u30a7\u30c3\u30af\u30b9\u30af\u30ea\u30d7\u30c8\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Console\/Commands\/HealthCheck.php\nclass HealthCheck extends Command\n{\n    protected $signature = 'app:health-check';\n\n    public function handle()\n    {\n        try {\n            \/\/ \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u63a5\u7d9a\u30c1\u30a7\u30c3\u30af\n            DB::connection()-&gt;getPdo();\n\n            \/\/ Redis\u30c1\u30a7\u30c3\u30af\n            Redis::ping();\n\n            \/\/ \u30ad\u30e5\u30fc\u30ef\u30fc\u30ab\u30fc\u30c1\u30a7\u30c3\u30af\n            $isQueueRunning = Cache::remember('queue_health', 60, function () {\n                dispatch(new HealthCheckJob());\n                return true;\n            });\n\n            $this-&gt;info('All systems are operational');\n            return 0;\n        } catch (\\Exception $e) {\n            $this-&gt;error('System check failed: ' . $e-&gt;getMessage());\n            return 1;\n        }\n    }\n}<\/pre>\n\n\n\n<p>\u3053\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3092GitHub Actions\u306e\u30c7\u30d7\u30ed\u30a4\u5f8c\u306e\u30b9\u30c6\u30c3\u30d7\u3068\u3057\u3066\u5b9f\u884c\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">      - name: Run Health Checks\n        run: |\n          php artisan app:health-check\n          curl -f https:\/\/api.yourapp.com\/health || exit 1<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u3068\u624b\u9806\u306b\u3088\u308a\u3001\u5b89\u5168\u3067\u52b9\u7387\u7684\u306a\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30d7\u30ed\u30bb\u30b9\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u672c\u756a\u74b0\u5883\u3067\u306e\u554f\u984c\u3092\u65e9\u671f\u306b\u767a\u898b\u3057\u3001\u8fc5\u901f\u306b\u5bfe\u5fdc\u3059\u308b\u305f\u3081\u306e\u4ed5\u7d44\u307f\u3082\u6574\u3048\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b89\u5b9a\u904b\u7528\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-43\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5<\/h2>\n\n\n\n<p>Laravel\u3068Next.js\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u4e21\u65b9\u3067\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u4e00\u822c\u7684\u306a\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\u3001\u52b9\u679c\u7684\u306a\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-44\">\u4e00\u822c\u7684\u306a\u554f\u984c\u3068\u89e3\u6c7a\u30a2\u30d7\u30ed\u30fc\u30c1<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-45\">1. CORS\u95a2\u9023\u306e\u554f\u984c<\/h4>\n\n\n\n<p>CORS\uff08Cross-Origin Resource Sharing\uff09\u306e\u554f\u984c\u306f\u6700\u3082\u4e00\u822c\u7684\u306a\u8ab2\u984c\u306e1\u3064\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Laravel\u5074\u3067\u306e\u8a3a\u65ad\u3068\u30c7\u30d0\u30c3\u30b0\n\/\/ app\/Http\/Middleware\/CorsDebugMiddleware.php\nclass CorsDebugMiddleware\n{\n    public function handle($request, Closure $next)\n    {\n        $response = $next($request);\n\n        \/\/ \u30c7\u30d0\u30c3\u30b0\u30e2\u30fc\u30c9\u306e\u5834\u5408\u3001CORS\u30d8\u30c3\u30c0\u30fc\u3092\u8a73\u7d30\u306b\u30ed\u30b0\u51fa\u529b\n        if (config('app.debug')) {\n            Log::debug('CORS Headers:', [\n                'Origin' =&gt; $request-&gt;header('Origin'),\n                'Access-Control-Allow-Origin' =&gt; $response-&gt;headers-&gt;get('Access-Control-Allow-Origin'),\n                'Access-Control-Allow-Methods' =&gt; $response-&gt;headers-&gt;get('Access-Control-Allow-Methods'),\n                'Access-Control-Allow-Headers' =&gt; $response-&gt;headers-&gt;get('Access-Control-Allow-Headers'),\n                'Access-Control-Allow-Credentials' =&gt; $response-&gt;headers-&gt;get('Access-Control-Allow-Credentials'),\n            ]);\n        }\n\n        return $response;\n    }\n}<\/pre>\n\n\n\n<p>Next.js\u5074\u3067\u306eCORS\u30a8\u30e9\u30fc\u30c7\u30d0\u30c3\u30b0\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ lib\/apiClient.ts\nconst apiClient = axios.create({\n  baseURL: process.env.NEXT_PUBLIC_API_URL,\n  withCredentials: true,\n});\n\n\/\/ \u30c7\u30d0\u30c3\u30b0\u7528\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\napiClient.interceptors.request.use(request =&gt; {\n  if (process.env.NODE_ENV === 'development') {\n    console.log('Request:', {\n      url: request.url,\n      method: request.method,\n      headers: request.headers,\n      data: request.data,\n    });\n  }\n  return request;\n});\n\napiClient.interceptors.response.use(\n  response =&gt; response,\n  error =&gt; {\n    if (process.env.NODE_ENV === 'development') {\n      console.error('API Error:', {\n        status: error.response?.status,\n        data: error.response?.data,\n        headers: error.response?.headers,\n        config: error.config,\n      });\n    }\n    return Promise.reject(error);\n  }\n);<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-46\">2. \u8a8d\u8a3c\u95a2\u9023\u306e\u554f\u984c\u89e3\u6c7a<\/h4>\n\n\n\n<p>\u8a8d\u8a3c\u306e\u554f\u984c\u3092\u8a3a\u65ad\u3059\u308b\u305f\u3081\u306e\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Laravel\u5074\u3067\u306e\u8a8d\u8a3c\u30c7\u30d0\u30c3\u30b0\u30d8\u30eb\u30d1\u30fc\n\/\/ app\/Helpers\/AuthDebugger.php\nclass AuthDebugger\n{\n    public static function debugToken(Request $request)\n    {\n        $token = $request-&gt;bearerToken();\n        $decoded = null;\n\n        try {\n            if ($token) {\n                $tokenModel = PersonalAccessToken::findToken($token);\n                $decoded = [\n                    'valid' =&gt; $tokenModel !== null,\n                    'user_id' =&gt; $tokenModel?-&gt;tokenable_id,\n                    'abilities' =&gt; $tokenModel?-&gt;abilities,\n                    'last_used_at' =&gt; $tokenModel?-&gt;last_used_at,\n                ];\n            }\n        } catch (\\Exception $e) {\n            $decoded = ['error' =&gt; $e-&gt;getMessage()];\n        }\n\n        Log::debug('Auth Debug:', [\n            'token_present' =&gt; !empty($token),\n            'token_info' =&gt; $decoded,\n            'session_id' =&gt; session()-&gt;getId(),\n            'user_authenticated' =&gt; auth()-&gt;check(),\n        ]);\n\n        return $decoded;\n    }\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-47\">3. \u72b6\u614b\u7ba1\u7406\u3068\u30c7\u30fc\u30bf\u540c\u671f\u306e\u554f\u984c<\/h4>\n\n\n\n<p>Next.js\u3067\u306e\u30c7\u30fc\u30bf\u540c\u671f\u554f\u984c\u306e\u30c7\u30d0\u30c3\u30b0\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ hooks\/useDebugQuery.ts\nimport { useQuery, QueryKey, UseQueryOptions } from '@tanstack\/react-query';\n\nexport function useDebugQuery&lt;TData&gt;(\n  queryKey: QueryKey,\n  queryFn: () =&gt; Promise&lt;TData&gt;,\n  options?: UseQueryOptions&lt;TData&gt;\n) {\n  const query = useQuery&lt;TData&gt;(queryKey, queryFn, options);\n\n  React.useEffect(() =&gt; {\n    if (process.env.NODE_ENV === 'development') {\n      console.log(`Query \"${queryKey.join('.')}\" status:`, {\n        isLoading: query.isLoading,\n        isError: query.isError,\n        error: query.error,\n        data: query.data,\n        isFetching: query.isFetching,\n        dataUpdatedAt: new Date(query.dataUpdatedAt).toISOString(),\n      });\n    }\n  }, [query.status, queryKey]);\n\n  return query;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-48\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u7279\u5b9a\u3068\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-49\">1. \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u30c4\u30fc\u30eb<\/h4>\n\n\n\n<p>Laravel\u5074\u3067\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8a08\u6e2c\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Http\/Middleware\/PerformanceMonitor.php\nclass PerformanceMonitor\n{\n    public function handle($request, Closure $next)\n    {\n        $startTime = microtime(true);\n        $startMemory = memory_get_usage();\n\n        $response = $next($request);\n\n        $endTime = microtime(true);\n        $endMemory = memory_get_usage();\n\n        if (config('app.debug')) {\n            $metrics = [\n                'execution_time' =&gt; ($endTime - $startTime) * 1000 . 'ms',\n                'memory_usage' =&gt; ($endMemory - $startMemory) \/ 1024 \/ 1024 . 'MB',\n                'database_queries' =&gt; DB::getQueryLog(),\n                'cache_hits' =&gt; Cache::getHits(),\n                'cache_misses' =&gt; Cache::getMisses(),\n            ];\n\n            Log::debug('Performance Metrics:', $metrics);\n\n            $response-&gt;headers-&gt;set('X-Performance-Metrics', json_encode($metrics));\n        }\n\n        return $response;\n    }\n}<\/pre>\n\n\n\n<p>Next.js\u3067\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8a08\u6e2c\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ components\/PerformanceMonitor.tsx\nimport { useEffect, useState } from 'react';\n\nexport function PerformanceMonitor({ children }: { children: React.ReactNode }) {\n  const [metrics, setMetrics] = useState&lt;any&gt;(null);\n\n  useEffect(() =&gt; {\n    if (process.env.NODE_ENV === 'development') {\n      const observer = new PerformanceObserver((list) =&gt; {\n        const entries = list.getEntries();\n        setMetrics(entries.map(entry =&gt; ({\n          name: entry.name,\n          duration: entry.duration,\n          startTime: entry.startTime,\n          entryType: entry.entryType,\n        })));\n      });\n\n      observer.observe({ entryTypes: ['resource', 'paint', 'navigation'] });\n\n      return () =&gt; observer.disconnect();\n    }\n  }, []);\n\n  if (process.env.NODE_ENV === 'development' &amp;&amp; metrics) {\n    console.table(metrics);\n  }\n\n  return &lt;&gt;{children}&lt;\/&gt;;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-50\">2. \u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u306e\u691c\u51fa\u3068\u89e3\u6c7a<\/h4>\n\n\n\n<p>Next.js\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306e\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u691c\u51fa\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ hooks\/useMemoryLeakDetector.ts\nexport function useMemoryLeakDetector(componentName: string) {\n  useEffect(() =&gt; {\n    if (process.env.NODE_ENV === 'development') {\n      console.log(`${componentName} mounted`);\n\n      const interval = setInterval(() =&gt; {\n        const memory = (performance as any).memory;\n        if (memory &amp;&amp; memory.usedJSHeapSize &gt; memory.jsHeapSizeLimit * 0.9) {\n          console.warn(`Potential memory leak detected in ${componentName}`);\n          console.log('Memory usage:', {\n            used: Math.round(memory.usedJSHeapSize \/ 1024 \/ 1024) + 'MB',\n            total: Math.round(memory.jsHeapSizeLimit \/ 1024 \/ 1024) + 'MB',\n          });\n        }\n      }, 5000);\n\n      return () =&gt; {\n        clearInterval(interval);\n        console.log(`${componentName} unmounted`);\n      };\n    }\n  }, [componentName]);\n}<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c4\u30fc\u30eb\u3068\u624b\u6cd5\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u904e\u7a0b\u3067\u767a\u751f\u3059\u308b\u554f\u984c\u3092\u52b9\u7387\u7684\u306b\u7279\u5b9a\u3057\u3001\u89e3\u6c7a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u672c\u756a\u74b0\u5883\u3067\u306e\u554f\u984c\u89e3\u6c7a\u3067\u306f\u3001\u9069\u5207\u306a\u30ed\u30b0\u51fa\u529b\u3068\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u304c\u91cd\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-51\">\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3068\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/h2>\n\n\n\n<p>Laravel\u3068Next.js\u306e\u7d71\u5408\u306b\u3064\u3044\u3066\u57fa\u672c\u7684\u306a\u7406\u89e3\u3092\u5f97\u305f\u5f8c\u306f\u3001\u3055\u3089\u306a\u308b\u5b66\u7fd2\u3068\u5b9f\u8df5\u3092\u901a\u3058\u3066\u30b9\u30ad\u30eb\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u306e\u305f\u3081\u306e\u30ed\u30fc\u30c9\u30de\u30c3\u30d7\u3068\u30ea\u30bd\u30fc\u30b9\u60c5\u5831\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-52\">\u3055\u3089\u306a\u308b\u5b66\u7fd2\u306e\u305f\u3081\u306e\u30ed\u30fc\u30c9\u30de\u30c3\u30d7<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-53\">1. \u5fdc\u7528\u7684\u306a\u30b9\u30ad\u30eb\u306e\u7fd2\u5f97<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u9806\u5e8f\u3067\u5b66\u7fd2\u3092\u9032\u3081\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>API\u306e\u9ad8\u5ea6\u306a\u8a2d\u8a08\u3068\u5b9f\u88c5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Laravel: \u30ab\u30b9\u30bf\u30e0\u30ec\u30b9\u30dd\u30f3\u30b9\u30c8\u30e9\u30f3\u30b9\u30d5\u30a9\u30fc\u30de\u30fc\u306e\u5b9f\u88c5\u4f8b\n   class ProductTransformer extends Fractal\\TransformerAbstract\n   {\n       protected $availableIncludes = [\n           'category',\n           'reviews',\n           'specifications'\n       ];\n\n       public function transform(Product $product)\n       {\n           return [\n               'id' =&gt; $product-&gt;id,\n               'name' =&gt; $product-&gt;name,\n               'slug' =&gt; $product-&gt;slug,\n               'price' =&gt; [\n                   'amount' =&gt; $product-&gt;price,\n                   'formatted' =&gt; number_format($product-&gt;price),\n                   'currency' =&gt; 'JPY'\n               ],\n               'meta' =&gt; [\n                   'created' =&gt; $product-&gt;created_at-&gt;toIso8601String(),\n                   'updated' =&gt; $product-&gt;updated_at-&gt;toIso8601String()\n               ]\n           ];\n       }\n   }<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u9ad8\u5ea6\u306a\u72b6\u614b\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Next.js: Zustand\u3092\u4f7f\u7528\u3057\u305f\u8907\u96d1\u306a\u72b6\u614b\u7ba1\u7406\n   import create from 'zustand'\n   import { devtools, persist } from 'zustand\/middleware'\n\n   interface CartState {\n     items: CartItem[]\n     totalAmount: number\n     addItem: (item: Product) =&gt; void\n     removeItem: (itemId: string) =&gt; void\n     clearCart: () =&gt; void\n   }\n\n   const useCartStore = create&lt;CartState&gt;()(\n     devtools(\n       persist(\n         (set) =&gt; ({\n           items: [],\n           totalAmount: 0,\n           addItem: (item) =&gt; \n             set((state) =&gt; {\n               const existingItem = state.items.find(i =&gt; i.id === item.id)\n               if (existingItem) {\n                 return {\n                   items: state.items.map(i =&gt;\n                     i.id === item.id \n                       ? { ...i, quantity: i.quantity + 1 }\n                       : i\n                   ),\n                   totalAmount: state.totalAmount + item.price\n                 }\n               }\n               return {\n                 items: [...state.items, { ...item, quantity: 1 }],\n                 totalAmount: state.totalAmount + item.price\n               }\n             }),\n           removeItem: (itemId) =&gt;\n             set((state) =&gt; ({\n               items: state.items.filter(i =&gt; i.id !== itemId),\n               totalAmount: state.totalAmount - \n                 (state.items.find(i =&gt; i.id === itemId)?.price ?? 0)\n             })),\n           clearCart: () =&gt; set({ items: [], totalAmount: 0 })\n         }),\n         {\n           name: 'cart-storage'\n         }\n       )\n     )\n   )<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30c6\u30b9\u30c8\u99c6\u52d5\u958b\u767a\uff08TDD\uff09\u306e\u5b9f\u8df5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Laravel: \u30d5\u30a3\u30fc\u30c1\u30e3\u30fc\u30c6\u30b9\u30c8\u306e\u4f8b\n   class ProductApiTest extends TestCase\n   {\n       use RefreshDatabase;\n\n       public function test_can_list_products_with_pagination()\n       {\n           \/\/ \u6e96\u5099\n           Product::factory()-&gt;count(15)-&gt;create();\n\n           \/\/ \u5b9f\u884c\n           $response = $this-&gt;getJson('\/api\/products?page=1');\n\n           \/\/ \u691c\u8a3c\n           $response\n               -&gt;assertStatus(200)\n               -&gt;assertJsonStructure([\n                   'data' =&gt; [\n                       '*' =&gt; ['id', 'name', 'price']\n                   ],\n                   'meta' =&gt; ['current_page', 'last_page', 'per_page']\n               ])\n               -&gt;assertJsonCount(10, 'data'); \/\/ \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\n       }\n   }<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-54\">2. \u63a8\u5968\u5b66\u7fd2\u9806\u5e8f<\/h4>\n\n\n<div id=\"id-b9027dd5-50ac-4d56-b6a0-5f74ffe017d3\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30d5\u30a7\u30fc\u30ba<\/th><th>\u5b66\u7fd2\u5185\u5bb9<\/th><th>\u4e88\u60f3\u671f\u9593<\/th><\/tr><\/thead><tbody><tr><td>\u57fa\u790e\u5f37\u5316<\/td><td>Laravel\/Next.js\u306e\u6df1\u3044\u7406\u89e3<\/td><td>1-2\u30f6\u6708<\/td><\/tr><tr><td>\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3<\/td><td>\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\/\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3<\/td><td>2-3\u30f6\u6708<\/td><\/tr><tr><td>\u5b9f\u8df5\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/td><td>\u5c0f\u301c\u4e2d\u898f\u6a21\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u958b\u767a<\/td><td>3-4\u30f6\u6708<\/td><\/tr><tr><td>\u5fdc\u7528\u6280\u8853<\/td><td>\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\/\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3<\/td><td>2-3\u30f6\u6708<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-55\">\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3068\u30b5\u30dd\u30fc\u30c8\u60c5\u5831<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-56\">1. \u6280\u8853\u60c5\u5831\u306e\u5165\u624b\u5148<\/h4>\n\n\n\n<p><strong>\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel \u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8: https:\/\/laravel.com\/docs<\/li>\n\n\n\n<li>Next.js \u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8: https:\/\/nextjs.org\/docs<\/li>\n\n\n\n<li>Laravel News: https:\/\/laravel-news.com<\/li>\n\n\n\n<li>Next.js Blog: https:\/\/nextjs.org\/blog<\/li>\n<\/ul>\n\n\n\n<p><strong>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel Japan: https:\/\/laravel.jp<\/li>\n\n\n\n<li>Next.js \u65e5\u672c\u8a9e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8: https:\/\/nextjs-ja-translation.vercel.app<\/li>\n\n\n\n<li>PHP\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9: https:\/\/phpcon.php.gr.jp<\/li>\n\n\n\n<li>React\/Next.js Meetup: https:\/\/reactjs-meetup.jp<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-57\">2. \u5b9f\u8df5\u7684\u306a\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/h4>\n\n\n\n<p><strong>\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9\u63a8\u5968\u9806<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Laravel\u57fa\u790e\u3068\u8a8d\u8a3c<\/li>\n\n\n\n<li>Next.js\u3068React\u306e\u72b6\u614b\u7ba1\u7406<\/li>\n\n\n\n<li>API\u30c7\u30b6\u30a4\u30f3\u3068RESTful\u8a2d\u8a08<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u99c6\u52d5\u958b\u767a\u5165\u9580<\/li>\n\n\n\n<li>\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3<\/li>\n<\/ol>\n\n\n\n<p><strong>\u66f8\u7c4d\u63a8\u5968<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u300cLaravel\u4e0a\u7d1a\u958b\u767a\u300d<\/li>\n\n\n\n<li>\u300c\u5b9f\u8df5Next.js\u300d<\/li>\n\n\n\n<li>\u300c\u30af\u30ea\u30fc\u30f3\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u300d<\/li>\n\n\n\n<li>\u300c\u30c6\u30b9\u30c8\u99c6\u52d5\u958b\u767a\u300d<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-58\">3. \u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u30ea\u30bd\u30fc\u30b9<\/h4>\n\n\n\n<p><strong>\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel Telescope<\/li>\n\n\n\n<li>React Developer Tools<\/li>\n\n\n\n<li>Chrome DevTools<\/li>\n\n\n\n<li>Postman\/Insomnia<\/li>\n<\/ul>\n\n\n\n<p><strong>\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u30c4\u30fc\u30eb<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel Horizon<\/li>\n\n\n\n<li>New Relic<\/li>\n\n\n\n<li>Sentry<\/li>\n\n\n\n<li>Datadog<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30ea\u30bd\u30fc\u30b9\u3068\u5b66\u7fd2\u30d1\u30b9\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001Laravel\u3068Next.js\u3092\u4f7f\u7528\u3057\u305f\u958b\u767a\u30b9\u30ad\u30eb\u3092\u7740\u5b9f\u306b\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u5b9f\u8df5\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u901a\u3058\u305f\u5b66\u7fd2\u3068\u3001\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3078\u306e\u53c2\u52a0\u304c\u91cd\u8981\u3067\u3059\u3002\u6280\u8853\u306e\u9032\u5316\u306f\u65e9\u3044\u305f\u3081\u3001\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u3068\u60c5\u5831\u53ce\u96c6\u3092\u5fc3\u304c\u3051\u307e\u3057\u3087\u3046\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":{"0":"post-2679","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-php","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2679"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2679\/revisions"}],"predecessor-version":[{"id":2681,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2679\/revisions\/2681"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}