{"id":210,"date":"2024-11-13T03:45:19","date_gmt":"2024-11-13T03:45:19","guid":{"rendered":"https:\/\/deskgadgetreviews.com\/?p=210"},"modified":"2024-11-13T04:24:44","modified_gmt":"2024-11-13T04:24:44","slug":"next_js-etc","status":"publish","type":"post","link":"https:\/\/deskgadgetreviews.com\/index.php\/2024\/11\/13\/next_js-etc\/","title":{"rendered":"Next.js\u306e\u8a2d\u5b9a\u306a\u3069\u3042\u308c\u3053\u308c"},"content":{"rendered":"\n<p>\u30ed\u30fc\u30ab\u30eb\u306bLinux\u9bd6\u7acb\u3066\u3066\u3001Windows\u304b\u3089\u63a5\u7d9a\u3057\u3066\u958b\u767a\u3057\u3066\u3044\u308b\u79c1\u304c\u3001<br>Next.js\u3067\u8a2d\u5b9a\u3059\u308b\u969b\u306b\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u7d39\u4ecb\uff08\u30e1\u30e2\u7528\u306a\u306e\u3067\u3001\u899a\u3048\u66f8\u304d\u7a0b\u5ea6\uff09<br>\u74b0\u5883\u8a2d\u5b9a\uff1f\u305d\u3093\u306a\u306eAI\u306b\u805e\u3044\u3068\u3051<\/p>\n\n\n\n<p>\u306a\u304a\u3001\u4fbf\u5b9c\u4e0a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306f\u300cmy-app\u300d\u3068\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#cnp\" title=\"npx create-next-app@latest my-app\">npx create-next-app@latest my-app<\/a><\/li>\n\n\n\n<li>cd my-app<\/li>\n\n\n\n<li><a href=\"#ssl\" title=\"SSL\u306e\u8a2d\u5b9a\">SSL\u306e\u8a2d\u5b9a<\/a>\n<ul class=\"wp-block-list\">\n<li>npm install openssl<\/li>\n\n\n\n<li>openssl genrsa -out local-ssl-proxy.key 2048<\/li>\n\n\n\n<li>openssl req -new -key local-ssl-proxy.key -out local-ssl-proxy.csr<\/li>\n\n\n\n<li>openssl x509 -req -days 365 -in local-ssl-proxy.csr -signkey local-ssl-proxy.key -out local-ssl-proxy.crt<\/li>\n\n\n\n<li>npm install &#8211;save-dev local-ssl-proxy<\/li>\n\n\n\n<li>npm install concurrently<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#package\" title=\"\">package.json\u306e\u66f8\u304d\u63db\u3048<\/a><\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3067\u3001\u4e00\u901a\u308a\u306e\u8a2d\u5b9a\u304c\u5b8c\u4e86\u3059\u308b\u306e\u3067\u3001<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev<\/code><\/pre>\n\n\n\n<p>\u3067\u8d77\u52d5\u3057\u3066\u78ba\u304b\u3081\u3088\u3046<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"cnp\">create-next-app<\/h2>\n\n\n\n<p>\u89e3\u8aac\u306f<a href=\"https:\/\/deskgadgetreviews.com\/index.php\/2024\/11\/13\/next-js_jpcode\/\" title=\"Next.js\u306e\u521d\u671f\u8a2d\u5b9a\u3092\u7ffb\u8a33\u3057\u3066\u307f\u305f\">\u5225\u30da\u30fc\u30b8<\/a>\u3067\u3084\u308b\u3068\u3057\u3066\u3001\u3072\u3068\u307e\u305a\u3069\u306e\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u305f\u306e\u304b\u3060\u3051\u3001\u89e3\u8aac<\/p>\n\n\n\n<p>\u30b3\u30de\u30f3\u30c9\u3092\u6253\u3063\u305f\u3089\u9078\u629e\u80a2\u304c\u51fa\u3066\u304f\u308b\u306e\u3067\u3001\u521d\u3081\u304b\u3089<br>TypeScript\uff1aNo, <br>ESLint\uff1aYes, <br>Tailwind CSS\uff1aNo, <br>src\/ directory\uff1aYes, <br>App Router\uff1aYes, <br>Turbopack\uff1aYes, <br>import alias\uff1aNo<br>\u306e\u9806\u756a\u3067\u9078\u629e<\/p>\n\n\n\n<p>\u3053\u306e\u6642\u70b9\u306e\u30d5\u30a1\u30a4\u30eb\u69cb\u9020<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>my-app\n|-node_modules\n| |-\u30e2\u30b8\u30e5\u30fc\u30eb\u30d5\u30a9\u30eb\u30c0\u304c\u3044\u3063\u3071\u3044\n|-public\n| |-\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\uff08.svc\uff09\u304c\u305d\u3053\u305d\u3053\n|-src\n| |-app\n|    |-fonts\n|    |-favicon.ico   \/\/\u521d\u671f\u30d5\u30a1\u30d3\u30b3\u30f3\n|    |-globals.css   \/\/\u5168\u4f53\u7528CSS\n|    |-layout.js     \/\/\u30d5\u30a9\u30f3\u30c8\u3084\u30e1\u30bf\u30c7\u30fc\u30bf\u8a2d\u5b9a\u7528\n|    |-page.js       \/\/\u30e1\u30a4\u30f3\u306e\u30eb\u30fc\u30c8\u30da\u30fc\u30b8\n|    |-page.module.css\/\/page.js\u3067\u4f7f\u3063\u3066\u308bCSS\n|-jsconfig.json\n|-next.config.mjs\n|-package.json\n|-package-lock.json\n|-README.md<\/code><\/pre>\n\n\n\n<p>AI\u306b\u6e21\u3059\u306a\u3089\u3001<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>my-app\n|- node_modules\n|- public\n|- src\n|  |- app\n|     |- fonts\n|     |- favicon.ico\n|     |- globals.css\n|     |- layout.js\n|     |- page.js\n|- jsconfig.json\n|- next.config.mjs\n|- package.json\n|- package-lock.json\n|- README.md\n<\/code><\/pre>\n\n\n\n<p>\u3067\u5341\u5206\u3067\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"ssl\">SSL\u8a2d\u5b9a<\/h2>\n\n\n\n<p>SSL\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u3001\u89e3\u8aac\uff08OpenSSL\u306f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6e08\u307f\u3067\u3042\u308b\u3053\u3068\uff09<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>openssl genrsa -out local-ssl-proxy.key 2048<\/li>\n\n\n\n<li>openssl req -new -key local-ssl-proxy.key -out local-ssl-proxy.csr<\/li>\n\n\n\n<li>openssl x509 -req -days 365 -in local-ssl-proxy.csr -signkey local-ssl-proxy.key -out local-ssl-proxy.crt<\/li>\n\n\n\n<li>npm install &#8211;save-dev local-ssl-proxy<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u306e\u8fba\u308a\u3067\u3001SSL\uff08http\u2192https\uff09\u306e\u8a2d\u5b9a\u3092\u3084\u3063\u3066\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u8272\u3005\u805e\u304b\u308c\u308b\u3051\u3069\u3001\u57fa\u672c\u7684\u306b\u3059\u3079\u3066Enter\u3092\u9023\u6253\u3059\u308c\u3070OK<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"package\">package.json\u306e\u66f8\u304d\u63db\u3048<\/h2>\n\n\n\n<p>\u5b8c\u4e86\u5f8c\uff08\u30d7\u30ed\u30ad\u30b7\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5f8c\uff09\u306b\u3001<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    \"dev\": \"next dev --turbopack --hostname 0.0.0.0 --port 3000\",\n    \"start:dev\": \"concurrently \\\"next dev --turbopack --hostname 0.0.0.0 --port 3000\\\" \\\"local-ssl-proxy --source 8443 --target 3000 --key local-ssl-proxy.key --cert local-ssl-proxy.crt\\\"\",<\/code><\/pre>\n\n\n\n<p>package.json\u306edev\u3092\u3053\u308c\u306b\u7f6e\u304d\u63db\u3048\u3001\u30ed\u30fc\u30ab\u30eb\u3078\u306e\u516c\u958b\u3068\u30dd\u30fc\u30c8\u306e\u6307\u5b9a\u3001SSL\u5b9f\u884c\u7528\uff08start:dev\uff09\u306e\u8ffd\u52a0\u3092\u884c\u3046\u3002<br>\u3061\u306a\u307f\u306b\u3001start:dev\u306f\u3001\u958b\u767a\u9bd6\u3068SSL\u30d7\u30ed\u30ad\u30b7\u9bd6\u3092\u5225\u3005\u3067\u8d77\u52d5\u3059\u308b\u5fc5\u8981\u304c\u3042\u3063\u305f\u305f\u3081\u306b\u8ffd\u52a0\u3057\u3066\u307e\u3059\u3002<\/p>\n\n\n\n<p>Web3\u7cfb\u3060\u3068\u3001\u30ed\u30fc\u30ab\u30eb\u3067\u3082SSL\u8a3c\u660e\u5fc5\u9808\u306a\u306e\u3067\u3001\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u2026\u2026<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30ed\u30fc\u30ab\u30eb\u306bLinux\u9bd6\u7acb\u3066\u3066\u3001Windows\u304b\u3089\u63a5\u7d9a\u3057\u3066\u958b\u767a\u3057\u3066\u3044\u308b\u79c1\u304c\u3001Next.js\u3067\u8a2d\u5b9a\u3059\u308b\u969b\u306b\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u7d39\u4ecb\uff08\u30e1\u30e2\u7528\u306a\u306e\u3067\u3001\u899a\u3048\u66f8\u304d\u7a0b\u5ea6\uff09\u74b0\u5883\u8a2d\u5b9a\uff1f\u305d\u3093\u306a\u306eAI\u306b\u805e\u3044\u3068\u3051 \u306a\u304a\u3001\u4fbf\u5b9c\u4e0a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306f\u300cmy&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-210","post","type-post","status-publish","format-standard","hentry","category-program"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/posts\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/comments?post=210"}],"version-history":[{"count":3,"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/posts\/210\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/posts\/210\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/media?parent=210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/categories?post=210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deskgadgetreviews.com\/index.php\/wp-json\/wp\/v2\/tags?post=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}