{"id":11120,"date":"2025-04-18T18:27:11","date_gmt":"2025-04-18T10:27:11","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/11120.html"},"modified":"2025-04-18T18:27:11","modified_gmt":"2025-04-18T10:27:11","slug":"%e5%a6%82%e4%bd%95%e5%b0%86reactnext-js%e7%9a%84%e9%a1%b9%e7%9b%ae%e9%83%a8%e7%bd%b2%e5%88%b0%e6%9c%8d%e5%8a%a1%e5%99%a8","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/11120.html","title":{"rendered":"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668"},"content":{"rendered":"<h2>\u4e00\u3001\u670d\u52a1\u5668\u73af\u5883\u51c6\u5907<\/h2>\n<h3>1. \u5b89\u88c5\u4f9d\u8d56 Node.js &#xff1a;<\/h3>\n<h5>\u00b7 Next.js\u9700\u8981Node.js\u73af\u5883&#xff08;\u5efa\u8bae\u4f7f\u7528LTS\u7248\u672c&#xff09;\u3002<\/h5>\n<p> <span class=\"token comment\"># Ubuntu\u793a\u4f8b curl -fsSL https:\/\/deb.nodesource.com\/setup_lts.x | sudo -E bash &#8211; sudo apt-get install -y nodejs <\/span><\/p>\n<h5>\u00b7 PM2 &#xff08;\u8fdb\u7a0b\u7ba1\u7406\u5de5\u5177&#xff0c;\u7528\u4e8e\u4fdd\u6301\u5e94\u7528\u8fd0\u884c&#xff09;&#xff1a;<\/h5>\n<p><span class=\"token function\">sudo<\/span> <span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> <span class=\"token parameter variable\">-g<\/span> pm2 <\/p>\n<h5>\u00b7 Nginx &#xff08;\u53ef\u9009&#xff0c;\u7528\u4e8e\u53cd\u5411\u4ee3\u7406\u548c\u9759\u6001\u8d44\u6e90\u5904\u7406&#xff09;&#xff1a;<\/h5>\n<p><span class=\"token function\">sudo<\/span> <span class=\"token function\">apt<\/span> <span class=\"token function\">install<\/span> <\/p>\n<h3>\u00b7 2. nginx \u914d\u7f6e\u9632\u706b\u5899<\/h3>\n<h5>\u00b7 \u5f00\u653e\u5fc5\u8981\u7aef\u53e3&#xff08;\u598280\u3001443\u30013000&#xff09;&#xff1a;<\/h5>\n<p><span class=\"token function\">sudo<\/span> ufw allow <span class=\"token number\">80<\/span> \/tcp <span class=\"token function\">sudo<\/span> ufw allow <span class=\"token number\">443<\/span> \/tcp <span class=\"token function\">sudo<\/span> ufw allow <span class=\"token number\">3000<\/span> \/tcp <span class=\"token function\">sudo<\/span> ufw reload<\/p>\n<h2>\u4e8c\u3001\u9879\u76ee\u914d\u7f6e\u4e0e\u6784\u5efa<\/h2>\n<h3>1. \u4e0a\u4f20\u4ee3\u7801\u5230\u670d\u52a1\u5668<\/h3>\n<h5>\u00b7 \u901a\u8fc7Git\u514b\u9686\u9879\u76ee&#xff08;\u786e\u4fdd\u670d\u52a1\u5668\u6709\u8bbf\u95ee\u4ed3\u5e93\u7684\u6743\u9650&#xff09;&#xff1a;<\/h5>\n<p><span class=\"token function\">git<\/span> clone https:\/\/your-repo-url.git<br \/>\n<span class=\"token builtin class-name\">cd<\/span> your-project<\/p>\n<p>\u4e5f\u53ef\u624b\u52a8\u4e0a\u4f20\u4ee3\u7801\u538b\u7f29\u5305\u5e76\u89e3\u538b\u3002<\/p>\n<h3>2.\u5b89\u88c5\u4f9d\u8d56\u5e76\u6784\u5efa<\/h3>\n<h5>\u00b7 \u5b89\u88c5\u4f9d\u8d56&#xff1a;<\/h5>\n<p><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> <span class=\"token parameter variable\">&#8211;production<\/span><\/p>\n<h5>\u00b7\u73af\u5883\u53d8\u91cf\u914d\u7f6e&#xff1a;<\/h5>\n<ul>\n<li>\u5728\u9879\u76ee\u6839\u76ee\u5f55\u521b\u5efa\u6216\u66f4\u65b0 .env.production \u6587\u4ef6\u3002<\/li>\n<li>\u6784\u5efa\u65f6Next.js\u4f1a\u8bfb\u53d6\u8be5\u6587\u4ef6&#xff08;\u53d8\u91cf\u9700\u4ee5 NEXT_PUBLIC_ \u524d\u7f00\u66b4\u9732\u5230\u5ba2\u6237\u7aef&#xff09;\u3002<\/li>\n<\/ul>\n<h5>\u00b7 \u6784\u5efa\u9879\u76ee&#xff1a;<\/h5>\n<p><span class=\"token function\">npm<\/span> run build<\/p>\n<h3>2. \u542f\u52a8Next.js\u670d\u52a1<\/h3>\n<h5>\u00b7 \u4f7f\u7528PM2\u542f\u52a8&#xff1a;<\/h5>\n<p>pm2 start <span class=\"token function\">npm<\/span> <span class=\"token parameter variable\">&#8211;name<\/span> <span class=\"token string\">&#034;next-app&#034;<\/span> &#8212; start<br \/>\npm2 save<br \/>\npm2 startup<\/p>\n<h2>\u4e09\u3001\u914d\u7f6eNginx\u53cd\u5411\u4ee3\u7406&#xff08;\u63a8\u8350&#xff09;<\/h2>\n<h3>1. \u521b\u5efaNginx\u914d\u7f6e\u6587\u4ef6<\/h3>\n<h5>\u00b7 \u65b0\u5efa\u6587\u4ef6 \/etc\/nginx\/sites-available\/next-app &#xff0c;\u5185\u5bb9\u5982\u4e0b&#xff1a;<\/h5>\n<p>server <span class=\"token punctuation\">{<\/span><br \/>\n    listen <span class=\"token number\">80<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    server_name your-domain.com<span class=\"token punctuation\">;<\/span> <span class=\"token comment\"># \u66ff\u6362\u4e3a\u516c\u53f8\u5185\u90e8\u57df\u540d\u6216IP<\/span><\/p>\n<p>    location \/ <span class=\"token punctuation\">{<\/span><br \/>\n        proxy_pass http:\/\/localhost:3000<span class=\"token punctuation\">;<\/span> <span class=\"token comment\"># \u8f6c\u53d1\u5230Next.js\u670d\u52a1<\/span><br \/>\n        proxy_http_version <span class=\"token number\">1.1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        proxy_set_header Upgrade <span class=\"token variable\">$http_upgrade<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        proxy_set_header Connection <span class=\"token string\">&#039;upgrade&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        proxy_set_header Host <span class=\"token variable\">$host<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        proxy_cache_bypass <span class=\"token variable\">$http_upgrade<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\"># \u9759\u6001\u8d44\u6e90\u7f13\u5b58&#xff08;\u53ef\u9009&#xff09;<\/span><br \/>\n    location \/_next\/static <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token builtin class-name\">alias<\/span> \/path\/to\/your-project\/.next\/static<span class=\"token punctuation\">;<\/span><br \/>\n        expires 365d<span class=\"token punctuation\">;<\/span><br \/>\n        access_log off<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h5>2. \u542f\u7528\u914d\u7f6e\u5e76\u91cd\u542fNginx<\/h5>\n<p><span class=\"token function\">sudo<\/span> <span class=\"token function\">ln<\/span> <span class=\"token parameter variable\">-s<\/span> \/etc\/nginx\/sites-available\/next-app \/etc\/nginx\/sites-enabled\/<br \/>\n<span class=\"token function\">sudo<\/span> nginx <span class=\"token parameter variable\">-t<\/span>  <span class=\"token comment\"># \u6d4b\u8bd5\u914d\u7f6e\u662f\u5426\u6b63\u786e<\/span><br \/>\n<span class=\"token function\">sudo<\/span> systemctl restart nginx<\/p>\n<h2>\u56db\u3001HTTPS\u914d\u7f6e&#xff08;\u53ef\u9009&#xff09;<\/h2>\n<li>\u4f7f\u7528Let\u2019s Encrypt\u7533\u8bf7\u8bc1\u4e66&#xff08;\u9700\u516c\u7f51\u57df\u540d&#xff09;\u6216\u516c\u53f8\u5185\u90e8CA\u7b7e\u53d1\u3002<\/li>\n<li>\u4fee\u6539Nginx\u914d\u7f6e\u76d1\u542c443\u7aef\u53e3\u5e76\u6dfb\u52a0SSL\u8bc1\u4e66\u8def\u5f84&#xff1a;<\/li>\n<p>server <span class=\"token punctuation\">{<\/span><br \/>\n    listen <span class=\"token number\">443<\/span> ssl<span class=\"token punctuation\">;<\/span><br \/>\n    server_name your-domain.com<span class=\"token punctuation\">;<\/span><br \/>\n    ssl_certificate \/path\/to\/cert.pem<span class=\"token punctuation\">;<\/span><br \/>\n    ssl_certificate_key \/path\/to\/privkey.pem<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token comment\"># &#8230;\u5176\u4ed6\u914d\u7f6e\u540c\u4e0a<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h2>\u4e94\u3001\u9a8c\u8bc1\u4e0e\u76d1\u63a7<\/h2>\n<h4>1. \u68c0\u67e5\u670d\u52a1\u72b6\u6001<\/h4>\n<p>pm2 status       <span class=\"token comment\"># \u67e5\u770bPM2\u8fdb\u7a0b\u72b6\u6001<\/span><br \/>\nsystemctl status nginx  <span class=\"token comment\"># \u68c0\u67e5Nginx\u662f\u5426\u8fd0\u884c<\/span><\/p>\n<h4>2. \u67e5\u770b\u65e5\u5fd7<\/h4>\n<p>pm2 logs next-app  <span class=\"token comment\"># Next.js\u65e5\u5fd7<\/span><br \/>\njournalctl <span class=\"token parameter variable\">-u<\/span> nginx <span class=\"token parameter variable\">-f<\/span>  <span class=\"token comment\"># Nginx\u65e5\u5fd7<\/span><\/p>\n<h2>\u516d\u3001\u9ad8\u7ea7\u4f18\u5316&#xff08;\u53ef\u9009&#xff09;<\/h2>\n<h3>1. \u4f7f\u7528Docker\u5bb9\u5668\u5316\u90e8\u7f72<\/h3>\n<h5>\u00b7 \u521b\u5efa Dockerfile &#xff1a;<\/h5>\n<p>FROM node:18-alpine<br \/>\nWORKDIR \/app<br \/>\nCOPY package*.json .\/<br \/>\nRUN <span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> <span class=\"token parameter variable\">&#8211;production<\/span><br \/>\nCOPY <span class=\"token builtin class-name\">.<\/span> <span class=\"token builtin class-name\">.<\/span><br \/>\nRUN <span class=\"token function\">npm<\/span> run build<br \/>\nCMD <span class=\"token punctuation\">[<\/span><span class=\"token string\">&#034;npm&#034;<\/span>, <span class=\"token string\">&#034;start&#034;<\/span><span class=\"token punctuation\">]<\/span><\/p>\n<h5>\u00b7 \u6784\u5efa\u955c\u50cf\u5e76\u8fd0\u884c&#xff1a;<\/h5>\n<p><span class=\"token function\">docker<\/span> build <span class=\"token parameter variable\">-t<\/span> next-app <span class=\"token builtin class-name\">.<\/span><br \/>\n<span class=\"token function\">docker<\/span> run <span class=\"token parameter variable\">-d<\/span> <span class=\"token parameter variable\">-p<\/span> <span class=\"token number\">3000<\/span>:3000 next-app<\/p>\n<h3>2. \u914d\u7f6eCI\/CD<\/h3>\n<p>\u00b7 \u901a\u8fc7Jenkins\/GitLab CI\u81ea\u52a8\u89e6\u53d1\u90e8\u7f72\u811a\u672c\u3002<\/p>\n<h2>\u6ce8\u610f\u4e8b\u9879<\/h2>\n<ul>\n<li>\u73af\u5883\u53d8\u91cf &#xff1a;\u786e\u4fdd\u751f\u4ea7\u73af\u5883\u53d8\u91cf&#xff08;\u5982API\u5730\u5740&#xff09;\u6b63\u786e\u914d\u7f6e&#xff0c;\u654f\u611f\u4fe1\u606f\u4e0d\u8981\u63d0\u4ea4\u5230\u4ee3\u7801\u5e93\u3002<\/li>\n<li>\u8d44\u6e90\u9650\u5236 &#xff1a;Node.js\u53ef\u80fd\u9700\u8c03\u6574\u5185\u5b58\u9650\u5236&#xff0c;\u53ef\u5728\u542f\u52a8\u65f6\u6dfb\u52a0 \u2013max-old-space-size&#061;4096 \u3002<\/li>\n<li>\u5907\u4efd\u4e0e\u56de\u6eda &#xff1a;\u90e8\u7f72\u524d\u5907\u4efd\u65e7\u7248\u672c&#xff0c;\u4fbf\u4e8e\u5feb\u901f\u56de\u6eda\u3002<\/li>\n<\/ul>\n<p>\u5b8c\u6210\u4ee5\u4e0a\u6b65\u9aa4\u540e&#xff0c;\u8bbf\u95ee\u670d\u52a1\u5668\u7684IP\u6216\u57df\u540d\u5373\u53ef\u67e5\u770b\u90e8\u7f72\u6210\u529f\u7684\u5e94\u7528\u3002<\/p>\n<h2>\u5b8c\u6574\u90e8\u7f72\u811a\u672c&#xff1a;<\/h2>\n<p>\u4ee5\u4e0b\u662f\u4e3aNode.js\u73af\u5883\u8bbe\u8ba1\u7684\u5b8c\u6574\u90e8\u7f72\u811a\u672c&#xff0c;\u5305\u542b\u4f9d\u8d56\u5b89\u88c5\u3001\u9879\u76ee\u6784\u5efa\u3001\u8fdb\u7a0b\u7ba1\u7406\u53caNginx\u53cd\u5411\u4ee3\u7406\u914d\u7f6e&#xff0c;\u53ef\u76f4\u63a5\u4fdd\u5b58\u4e3a deploy.sh \u5e76\u6267\u884c&#xff1a;<\/p>\n<p><span class=\"token shebang important\">#!\/bin\/bash<\/span><\/p>\n<p><span class=\"token comment\"># \u90e8\u7f72\u811a\u672c&#xff1a;\u81ea\u52a8\u90e8\u7f72Next.js\u9879\u76ee\u5230\u672c\u5730\u670d\u52a1\u5668&#xff08;Node.js\u73af\u5883&#xff09;<\/span><br \/>\n<span class=\"token comment\"># \u4f7f\u7528\u65b9\u6cd5&#xff1a;chmod &#043;x deploy.sh &amp;&amp; .\/deploy.sh<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># \u914d\u7f6e\u533a&#xff08;\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u4fee\u6539&#xff09;<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token assign-left variable\">PROJECT_NAME<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;my-next-app&#034;<\/span>       <span class=\"token comment\"># \u9879\u76ee\u540d\u79f0<\/span><br \/>\n<span class=\"token assign-left variable\">PROJECT_PORT<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">3000<\/span>                <span class=\"token comment\"># Next.js\u670d\u52a1\u7aef\u53e3<\/span><br \/>\n<span class=\"token assign-left variable\">PROJECT_GIT_REPO<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;https:\/\/github.com\/yourusername\/your-repo.git&#034;<\/span>  <span class=\"token comment\"># Git\u4ed3\u5e93\u5730\u5740<\/span><br \/>\n<span class=\"token assign-left variable\">PROJECT_DIR<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;\/var\/www\/<span class=\"token variable\">$PROJECT_NAME<\/span>&#034;<\/span>     <span class=\"token comment\"># \u9879\u76ee\u90e8\u7f72\u76ee\u5f55<\/span><br \/>\n<span class=\"token assign-left variable\">NGINX_AVAILABLE<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;\/etc\/nginx\/sites-available\/<span class=\"token variable\">$PROJECT_NAME<\/span>.conf&#034;<\/span>  <span class=\"token comment\"># Nginx\u914d\u7f6e\u8def\u5f84<\/span><br \/>\n<span class=\"token assign-left variable\">NGINX_ENABLED<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;\/etc\/nginx\/sites-enabled\/<span class=\"token variable\">$PROJECT_NAME<\/span>.conf&#034;<\/span>      <span class=\"token comment\"># Nginx\u542f\u7528\u94fe\u63a5<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># \u989c\u8272\u8f93\u51fa\u51fd\u6570<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token assign-left variable\">RED<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#039;\\\\033[0;31m&#039;<\/span><br \/>\n<span class=\"token assign-left variable\">GREEN<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#039;\\\\033[0;32m&#039;<\/span><br \/>\n<span class=\"token assign-left variable\">YELLOW<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#039;\\\\033[0;33m&#039;<\/span><br \/>\n<span class=\"token assign-left variable\">NC<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#039;\\\\033[0m&#039;<\/span> <span class=\"token comment\"># \u6062\u590d\u9ed8\u8ba4\u989c\u8272<\/span><\/p>\n<p><span class=\"token function-name function\">success<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token builtin class-name\">echo<\/span> <span class=\"token parameter variable\">-e<\/span> <span class=\"token string\">&#034;<span class=\"token variable\">${GREEN}<\/span><span class=\"token variable\">$1<\/span><span class=\"token variable\">${NC}<\/span>&#034;<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token function-name function\">error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token builtin class-name\">echo<\/span> <span class=\"token parameter variable\">-e<\/span> <span class=\"token string\">&#034;<span class=\"token variable\">${RED}<\/span><span class=\"token variable\">$1<\/span><span class=\"token variable\">${NC}<\/span>&#034;<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token builtin class-name\">exit<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token function-name function\">warning<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token builtin class-name\">echo<\/span> <span class=\"token parameter variable\">-e<\/span> <span class=\"token string\">&#034;<span class=\"token variable\">${YELLOW}<\/span><span class=\"token variable\">$1<\/span><span class=\"token variable\">${NC}<\/span>&#034;<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># 1. \u5b89\u88c5\u4f9d\u8d56<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token function-name function\">install_dependencies<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    success <span class=\"token string\">&#034;<span class=\"token entity\" title=\"\\\\n\">\\\\n<\/span>[1\/6] \u5b89\u88c5\u7cfb\u7edf\u4f9d\u8d56&#8230;&#034;<\/span><br \/>\n    <span class=\"token comment\"># \u5b89\u88c5Node.js&#xff08;LTS\u7248\u672c&#xff09;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token operator\">!<\/span> <span class=\"token builtin class-name\">command<\/span> <span class=\"token parameter variable\">-v<\/span> <span class=\"token function\">node<\/span> <span class=\"token operator\">&amp;&gt;<\/span> \/dev\/null<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">then<\/span><br \/>\n        warning <span class=\"token string\">&#034;\u672a\u5b89\u88c5Node.js&#xff0c;\u6b63\u5728\u5b89\u88c5&#8230;&#034;<\/span><br \/>\n        <span class=\"token function\">curl<\/span> <span class=\"token parameter variable\">-fsSL<\/span> https:\/\/deb.nodesource.com\/setup_lts.x <span class=\"token operator\">|<\/span> <span class=\"token function\">sudo<\/span> <span class=\"token parameter variable\">-E<\/span> <span class=\"token function\">bash<\/span> &#8211;<br \/>\n        <span class=\"token function\">sudo<\/span> <span class=\"token function\">apt-get<\/span> <span class=\"token function\">install<\/span> <span class=\"token parameter variable\">-y<\/span> nodejs <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;Node.js\u5b89\u88c5\u5931\u8d25&#034;<\/span><br \/>\n    <span class=\"token keyword\">fi<\/span><\/p>\n<p>    <span class=\"token comment\"># \u5b89\u88c5PM2<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token operator\">!<\/span> <span class=\"token builtin class-name\">command<\/span> <span class=\"token parameter variable\">-v<\/span> pm2 <span class=\"token operator\">&amp;&gt;<\/span> \/dev\/null<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">then<\/span><br \/>\n        <span class=\"token function\">sudo<\/span> <span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> <span class=\"token parameter variable\">-g<\/span> pm2 <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;PM2\u5b89\u88c5\u5931\u8d25&#034;<\/span><br \/>\n    <span class=\"token keyword\">fi<\/span><\/p>\n<p>    <span class=\"token comment\"># \u5b89\u88c5Nginx&#xff08;\u53ef\u9009&#xff09;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token operator\">!<\/span> <span class=\"token builtin class-name\">command<\/span> <span class=\"token parameter variable\">-v<\/span> nginx <span class=\"token operator\">&amp;&gt;<\/span> \/dev\/null<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">then<\/span><br \/>\n        warning <span class=\"token string\">&#034;\u672a\u5b89\u88c5Nginx&#xff0c;\u6b63\u5728\u5b89\u88c5&#8230;&#034;<\/span><br \/>\n        <span class=\"token function\">sudo<\/span> <span class=\"token function\">apt<\/span> <span class=\"token function\">install<\/span> <span class=\"token parameter variable\">-y<\/span> nginx <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;Nginx\u5b89\u88c5\u5931\u8d25&#034;<\/span><br \/>\n    <span class=\"token keyword\">fi<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># 2. \u914d\u7f6e\u9632\u706b\u5899<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token function-name function\">configure_firewall<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    success <span class=\"token string\">&#034;<span class=\"token entity\" title=\"\\\\n\">\\\\n<\/span>[2\/6] \u914d\u7f6e\u9632\u706b\u5899&#8230;&#034;<\/span><br \/>\n    <span class=\"token function\">sudo<\/span> ufw allow <span class=\"token variable\">$PROJECT_PORT<\/span>\/tcp    <span class=\"token comment\"># \u5f00\u653eNext.js\u7aef\u53e3<\/span><br \/>\n    <span class=\"token function\">sudo<\/span> ufw allow <span class=\"token string\">&#039;Nginx Full&#039;<\/span>         <span class=\"token comment\"># \u5f00\u653eHTTP\/HTTPS<\/span><br \/>\n    <span class=\"token function\">sudo<\/span> ufw reload<br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># 3. \u62c9\u53d6\u9879\u76ee\u4ee3\u7801<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token function-name function\">clone_project<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    success <span class=\"token string\">&#034;<span class=\"token entity\" title=\"\\\\n\">\\\\n<\/span>[3\/6] \u62c9\u53d6\u9879\u76ee\u4ee3\u7801&#8230;&#034;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">[<\/span> <span class=\"token parameter variable\">-d<\/span> <span class=\"token string\">&#034;<span class=\"token variable\">$PROJECT_DIR<\/span>&#034;<\/span> <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">then<\/span><br \/>\n        warning <span class=\"token string\">&#034;\u68c0\u6d4b\u5230\u5df2\u6709\u9879\u76ee\u76ee\u5f55&#xff0c;\u66f4\u65b0\u4ee3\u7801&#8230;&#034;<\/span><br \/>\n        <span class=\"token builtin class-name\">cd<\/span> <span class=\"token variable\">$PROJECT_DIR<\/span><br \/>\n        <span class=\"token function\">git<\/span> pull <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;\u4ee3\u7801\u62c9\u53d6\u5931\u8d25&#034;<\/span><br \/>\n    <span class=\"token keyword\">else<\/span><br \/>\n        <span class=\"token function\">sudo<\/span> <span class=\"token function\">mkdir<\/span> <span class=\"token parameter variable\">-p<\/span> <span class=\"token variable\">$PROJECT_DIR<\/span><br \/>\n        <span class=\"token function\">sudo<\/span> <span class=\"token function\">chown<\/span> <span class=\"token parameter variable\">-R<\/span> <span class=\"token environment constant\">$USER<\/span><span class=\"token builtin class-name\">:<\/span><span class=\"token environment constant\">$USER<\/span> <span class=\"token variable\">$PROJECT_DIR<\/span><br \/>\n        <span class=\"token function\">git<\/span> clone <span class=\"token variable\">$PROJECT_GIT_REPO<\/span> <span class=\"token variable\">$PROJECT_DIR<\/span> <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;\u4ee3\u7801\u514b\u9686\u5931\u8d25&#034;<\/span><br \/>\n        <span class=\"token builtin class-name\">cd<\/span> <span class=\"token variable\">$PROJECT_DIR<\/span><br \/>\n    <span class=\"token keyword\">fi<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># 4. \u5b89\u88c5\u4f9d\u8d56\u5e76\u6784\u5efa<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token function-name function\">build_project<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    success <span class=\"token string\">&#034;<span class=\"token entity\" title=\"\\\\n\">\\\\n<\/span>[4\/6] \u5b89\u88c5\u4f9d\u8d56\u5e76\u6784\u5efa&#8230;&#034;<\/span><br \/>\n    <span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> <span class=\"token parameter variable\">&#8211;production<\/span> <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;\u4f9d\u8d56\u5b89\u88c5\u5931\u8d25&#034;<\/span><\/p>\n<p>    <span class=\"token comment\"># \u68c0\u67e5\u73af\u5883\u53d8\u91cf\u6587\u4ef6\u662f\u5426\u5b58\u5728<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">[<\/span> <span class=\"token operator\">!<\/span> <span class=\"token parameter variable\">-f<\/span> .env.production <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">then<\/span><br \/>\n        warning <span class=\"token string\">&#034;\u68c0\u6d4b\u5230\u7f3a\u5c11 .env.production \u6587\u4ef6&#xff0c;\u8bf7\u624b\u52a8\u521b\u5efa&#xff01;&#034;<\/span><br \/>\n        <span class=\"token function\">touch<\/span> .env.production<br \/>\n    <span class=\"token keyword\">fi<\/span><\/p>\n<p>    <span class=\"token function\">npm<\/span> run build <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;\u9879\u76ee\u6784\u5efa\u5931\u8d25&#034;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># 5. \u542f\u52a8PM2\u8fdb\u7a0b<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token function-name function\">start_pm2<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    success <span class=\"token string\">&#034;<span class=\"token entity\" title=\"\\\\n\">\\\\n<\/span>[5\/6] \u542f\u52a8PM2\u8fdb\u7a0b&#8230;&#034;<\/span><br \/>\n    <span class=\"token comment\"># \u68c0\u67e5\u662f\u5426\u5df2\u5b58\u5728\u540c\u540d\u8fdb\u7a0b<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> pm2 list <span class=\"token operator\">|<\/span> <span class=\"token function\">grep<\/span> <span class=\"token parameter variable\">-q<\/span> <span class=\"token variable\">$PROJECT_NAME<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">then<\/span><br \/>\n        pm2 reload <span class=\"token variable\">$PROJECT_NAME<\/span> <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;PM2\u8fdb\u7a0b\u91cd\u542f\u5931\u8d25&#034;<\/span><br \/>\n    <span class=\"token keyword\">else<\/span><br \/>\n        pm2 start <span class=\"token function\">npm<\/span> <span class=\"token parameter variable\">&#8211;name<\/span> <span class=\"token string\">&#034;<span class=\"token variable\">$PROJECT_NAME<\/span>&#034;<\/span> &#8212; start <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;PM2\u8fdb\u7a0b\u542f\u52a8\u5931\u8d25&#034;<\/span><br \/>\n    <span class=\"token keyword\">fi<\/span><br \/>\n    pm2 save<br \/>\n    pm2 startup  <span class=\"token comment\"># \u63d0\u793a\u7528\u6237\u6267\u884c\u751f\u6210\u7684\u547d\u4ee4\u4ee5\u8bbe\u7f6e\u5f00\u673a\u542f\u52a8<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># 6. \u914d\u7f6eNginx\u53cd\u5411\u4ee3\u7406<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token function-name function\">configure_nginx<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    success <span class=\"token string\">&#034;<span class=\"token entity\" title=\"\\\\n\">\\\\n<\/span>[6\/6] \u914d\u7f6eNginx\u53cd\u5411\u4ee3\u7406&#8230;&#034;<\/span><br \/>\n    <span class=\"token function\">sudo<\/span> <span class=\"token function\">bash<\/span> <span class=\"token parameter variable\">-c<\/span> <span class=\"token string\">&#034;cat &gt; <span class=\"token variable\">$NGINX_AVAILABLE<\/span> &lt;&lt; EOF<br \/>\nserver {<br \/>\n    listen 80;<br \/>\n    server_name _;  # \u66ff\u6362\u4e3a\u5b9e\u9645\u57df\u540d\u6216IP<\/p>\n<p>    location \/ {<br \/>\n        proxy_pass http:\/\/localhost:<span class=\"token variable\">$PROJECT_PORT<\/span>;<br \/>\n        proxy_set_header Host \\\\<span class=\"token variable\">$host<\/span>;<br \/>\n        proxy_set_header X-Real-IP \\\\<span class=\"token variable\">$remote_addr<\/span>;<br \/>\n        proxy_set_header X-Forwarded-For \\\\<span class=\"token variable\">$proxy_add_x_forwarded_for<\/span>;<br \/>\n        proxy_set_header X-Forwarded-Proto \\\\<span class=\"token variable\">$scheme<\/span>;<br \/>\n    }<\/p>\n<p>    # \u9759\u6001\u8d44\u6e90\u7f13\u5b58<br \/>\n    location \/_next\/static {<br \/>\n        alias <span class=\"token variable\">$PROJECT_DIR<\/span>\/.next\/static;<br \/>\n        expires 365d;<br \/>\n        access_log off;<br \/>\n    }<br \/>\n}<br \/>\nEOF&#034;<\/span><\/p>\n<p>    <span class=\"token comment\"># \u521b\u5efa\u542f\u7528\u94fe\u63a5<\/span><br \/>\n    <span class=\"token function\">sudo<\/span> <span class=\"token function\">ln<\/span> <span class=\"token parameter variable\">-sf<\/span> <span class=\"token variable\">$NGINX_AVAILABLE<\/span> <span class=\"token variable\">$NGINX_ENABLED<\/span><br \/>\n    <span class=\"token function\">sudo<\/span> nginx <span class=\"token parameter variable\">-t<\/span> <span class=\"token operator\">||<\/span> error <span class=\"token string\">&#034;Nginx\u914d\u7f6e\u6d4b\u8bd5\u5931\u8d25&#034;<\/span><br \/>\n    <span class=\"token function\">sudo<\/span> systemctl restart nginx<br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\n<span class=\"token comment\"># \u4e3b\u6267\u884c\u6d41\u7a0b<\/span><br \/>\n<span class=\"token comment\"># &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/span><br \/>\ninstall_dependencies<br \/>\nconfigure_firewall<br \/>\nclone_project<br \/>\nbuild_project<br \/>\nstart_pm2<br \/>\nconfigure_nginx<\/p>\n<p>success <span class=\"token string\">&#034;<span class=\"token entity\" title=\"\\\\n\">\\\\n<\/span>\u2705 \u90e8\u7f72\u5b8c\u6210&#xff01;\u8bbf\u95ee http:\/\/\u670d\u52a1\u5668IP \u67e5\u770b\u7ad9\u70b9&#034;<\/span><br \/>\nwarning <span class=\"token string\">&#034;\u63d0\u793a&#xff1a;\u82e5\u9700HTTPS&#xff0c;\u8bf7\u624b\u52a8\u4fee\u6539Nginx\u914d\u7f6e\u6dfb\u52a0SSL\u8bc1\u4e66&#034;<\/span><\/p>\n<h5>1. \u4fee\u6539\u914d\u7f6e<\/h5>\n<p>\u6253\u5f00\u811a\u672c&#xff0c;\u4fee\u6539\u9876\u90e8\u7684\u914d\u7f6e\u533a&#xff1a; &#8211; PROJECT_NAME : \u9879\u76ee\u540d\u79f0&#xff08;\u7528\u4e8ePM2\u548cNginx\u914d\u7f6e &#8211; PROJECT_PORT : Next.js\u670d\u52a1\u7aef\u53e3&#xff08;\u9ed8\u8ba43000&#xff09; &#8211; PROJECT_GIT_REPO : \u4f60\u7684Git\u4ed3\u5e93\u5730\u5740&#xff08;\u786e\u4fdd\u670d\u52a1\u5668\u6709\u8bbf\u95ee\u6743\u9650 &#xff09; &#8211; PROJECT_DIR : \u9879\u76ee\u90e8\u7f72\u76ee\u5f55&#xff08;\u9ed8\u8ba4\/var\/www\/my-next-app &#xff09;<\/p>\n<h5>2. \u8d4b\u4e88\u6267\u884c\u6743\u9650<\/h5>\n<p><span class=\"token function\">chmod<\/span> &#043;x deploy.sh <\/p>\n<h5>3. \u8fd0\u884c\u811a\u672c<\/h5>\n<p> .\/deploy.sh <\/p>\n<h5>4. \u540e\u7eed\u64cd\u4f5c<\/h5>\n<ul>\n<li>\n<p>\u00b7 \u6839\u636e\u63d0\u793a\u624b\u52a8\u521b\u5efa .env.production \u6587\u4ef6\u5e76\u586b\u5199\u751f\u4ea7\u73af\u5883\u53d8\u91cf<\/p>\n<p> <span class=\"token builtin class-name\">cd<\/span> \/var\/www\/my-next-app<br \/>\n<span class=\"token function\">nano<\/span> .env.production <span class=\"token comment\"># \u793a\u4f8b\u5185\u5bb9&#xff1a;NEXT_PUBLIC_API_URL&#061;http:\/\/api.example.com <\/span>\n <\/li>\n<li>\n<p>\u00b7 \u6267\u884c pm2 startup \u751f\u6210\u7684\u547d\u4ee4&#xff08;\u8bbe\u7f6e\u5f00\u673a\u81ea\u542f&#xff09;<\/p>\n<\/li>\n<li>\n<p>\u00b7 \u65e5\u5fd7\u76d1\u63a7&#xff1a; \u4f7f\u7528 pm2 logs \u67e5\u770b\u5b9e\u65f6\u65e5\u5fd7&#xff1a;<\/p>\n<p> pm2 logs my-next-app\n <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb1.2k\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf12\u6b21\u3002\u5c06React+Next.js\u9879\u76ee\u90e8\u7f72\u5230\u672c\u5730\u670d\u52a1\u5668\u9700\u8981\u4ee5\u4e0b\u6b65\u9aa4\uff0c\u5206\u4e3a\u73af\u5883\u51c6\u5907\u3001\u9879\u76ee\u914d\u7f6e\u3001\u90e8\u7f72\u548c\u4f18\u5316\u4e09\u4e2a\u9636\u6bb5\uff1a_next.js \u90e8\u7f72<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,186,524,87,525,526,43],"topic":[],"class_list":["post-11120","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-node-js","tag-react-js","tag-87","tag-525","tag-526","tag-43"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/11120.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb1.2k\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf12\u6b21\u3002\u5c06React+Next.js\u9879\u76ee\u90e8\u7f72\u5230\u672c\u5730\u670d\u52a1\u5668\u9700\u8981\u4ee5\u4e0b\u6b65\u9aa4\uff0c\u5206\u4e3a\u73af\u5883\u51c6\u5907\u3001\u9879\u76ee\u914d\u7f6e\u3001\u90e8\u7f72\u548c\u4f18\u5316\u4e09\u4e2a\u9636\u6bb5\uff1a_next.js \u90e8\u7f72\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/11120.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-18T10:27:11+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/11120.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/11120.html\",\"name\":\"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-04-18T10:27:11+00:00\",\"dateModified\":\"2025-04-18T10:27:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/11120.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/11120.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/11120.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/11120.html","og_locale":"zh_CN","og_type":"article","og_title":"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb1.2k\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf12\u6b21\u3002\u5c06React+Next.js\u9879\u76ee\u90e8\u7f72\u5230\u672c\u5730\u670d\u52a1\u5668\u9700\u8981\u4ee5\u4e0b\u6b65\u9aa4\uff0c\u5206\u4e3a\u73af\u5883\u51c6\u5907\u3001\u9879\u76ee\u914d\u7f6e\u3001\u90e8\u7f72\u548c\u4f18\u5316\u4e09\u4e2a\u9636\u6bb5\uff1a_next.js \u90e8\u7f72","og_url":"https:\/\/www.wsisp.com\/helps\/11120.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-04-18T10:27:11+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/11120.html","url":"https:\/\/www.wsisp.com\/helps\/11120.html","name":"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-04-18T10:27:11+00:00","dateModified":"2025-04-18T10:27:11+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/11120.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/11120.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/11120.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u5982\u4f55\u5c06React+Next.js\u7684\u9879\u76ee\u90e8\u7f72\u5230\u670d\u52a1\u5668"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/11120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=11120"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/11120\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=11120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=11120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=11120"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=11120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}