{"id":120541,"date":"2026-10-31T22:41:16","date_gmt":"2026-10-31T14:41:16","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/120541.html"},"modified":"2026-10-31T22:41:16","modified_gmt":"2026-10-31T14:41:16","slug":"%e4%bb%8eflask%e5%88%b0next-js%e5%8d%9a%e5%ae%a2v2-5%e9%87%8d%e6%9e%84%e5%ae%9e%e5%bd%95","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/120541.html","title":{"rendered":"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55"},"content":{"rendered":"<h2>&#x1f338; \u4ece Flask \u5230 Next.js&#xff1a;\u6211\u7684\u4e2a\u4eba\u535a\u5ba2 V2.5 \u5168\u6808\u91cd\u6784\u5b9e\u5f55&#xff08;\u542b\u817e\u8baf\u4e91\u90e8\u7f72\u5b8c\u6574\u6307\u5357&#xff09;<\/h2>\n<p>&#x1f4cc; \u6587\u7ae0\u5bfc\u89c8&#xff1a;\u672c\u6587\u5b8c\u6574\u8bb0\u5f55\u4e86\u4e2a\u4eba\u535a\u5ba2\u4ece Flask &#043; SQLite \u5355\u4f53\u67b6\u6784\u91cd\u6784\u4e3a Next.js 16 (App Router) &#043; Prisma 6 &#043; PostgreSQL 16 \u5168\u6808\u5e94\u7528\u7684\u5168\u8fc7\u7a0b\u3002\u5168\u6587\u7ea6 18000 \u5b57&#xff0c;\u542b 30&#043; \u53ef\u76f4\u63a5\u590d\u7528\u7684\u4ee3\u7801\u7247\u6bb5&#xff0c;\u8986\u76d6\u67b6\u6784\u8bbe\u8ba1\u3001\u6838\u5fc3\u6a21\u5757\u5b9e\u73b0\u3001\u672c\u5730\u73af\u5883\u642d\u5efa\u3001\u817e\u8baf\u4e91\u751f\u4ea7\u90e8\u7f72\u3001\u6027\u80fd\u4f18\u5316\u3001\u6545\u969c\u6392\u67e5\u516d\u5927\u677f\u5757\u3002\u9002\u5408\u6709\u4e00\u5b9a\u524d\u7aef\u57fa\u7840\u3001\u51c6\u5907\u843d\u5730\u5168\u6808\u4e2a\u4eba\u9879\u76ee\u7684\u5f00\u53d1\u8005\u53c2\u8003\u3002<\/p>\n<p>&#x1f3af; \u9605\u8bfb\u6536\u76ca&#xff1a;\u638c\u63e1 App Router \u7684 SSR\/SSG\/ISR \u6df7\u5408\u6e32\u67d3\u7b56\u7565 \u00b7 \u81ea\u5efa JWT &#043; GitHub OAuth \u53cc\u8f68\u8ba4\u8bc1 \u00b7 Prisma \u72b6\u6001\u673a\u5efa\u6a21 \u00b7 Ubuntu &#043; Nginx &#043; PM2 \u751f\u4ea7\u7ea7\u90e8\u7f72 \u00b7 \u5e38\u89c1\u6545\u969c\u7684\u5b9a\u4f4d\u4e0e\u89e3\u51b3<\/p>\n<p>\u5173\u952e\u8bcd&#xff1a;Next.js 16 \u00b7 Prisma \u00b7 PostgreSQL \u00b7 \u5168\u6808\u535a\u5ba2 \u00b7 \u817e\u8baf\u4e91\u90e8\u7f72 \u00b7 GitHub OAuth \u00b7 \u72b6\u6001\u673a\u8bbe\u8ba1 \u00b7 SSR \u4f18\u5316<\/p>\n<hr \/>\n<h3>&#x1f4d1; \u76ee\u5f55<\/h3>\n<ul>\n<li>\u4e00\u3001\u91cd\u6784\u80cc\u666f\u4e0e\u76ee\u6807<\/li>\n<li>\u4e8c\u3001\u6280\u672f\u9009\u578b\u4e0e\u67b6\u6784\u8bbe\u8ba1<\/li>\n<li>\u4e09\u3001\u6838\u5fc3\u529f\u80fd\u5b9e\u73b0<\/li>\n<li>\u56db\u3001\u672c\u5730\u5f00\u53d1\u73af\u5883\u642d\u5efa<\/li>\n<li>\u4e94\u3001\u90e8\u7f72\u5230\u817e\u8baf\u4e91&#xff08;Ubuntu &#043; PM2 &#043; Nginx&#xff09;<\/li>\n<li>\u516d\u3001\u6027\u80fd\u4f18\u5316\u5b9e\u8df5<\/li>\n<li>\u4e03\u3001\u5b89\u5168\u52a0\u56fa\u5efa\u8bae<\/li>\n<li>\u516b\u3001\u8e29\u5751\u5b9e\u5f55\u4e0e\u6545\u969c\u6392\u67e5\u624b\u518c<\/li>\n<li>\u4e5d\u3001\u603b\u7ed3\u4e0e\u540e\u7eed\u89c4\u5212<\/li>\n<li>\u9644\u5f55&#xff1a;\u5e38\u7528\u547d\u4ee4\u901f\u67e5\u8868<\/li>\n<\/ul>\n<hr \/>\n<h3>\u4e00\u3001\u91cd\u6784\u80cc\u666f\u4e0e\u76ee\u6807<\/h3>\n<h4>1.1 V1 \u7684\u95ee\u9898\u6e05\u5355<\/h4>\n<p>V1 \u7248\u672c\u57fa\u4e8e Flask &#043; SQLite&#xff0c;\u8dd1\u4e86\u534a\u5e74\u540e\u66b4\u9732\u51fa\u56db\u4e2a\u81f4\u547d\u95ee\u9898&#xff1a;<\/p>\n<table>\n<tr>\u95ee\u9898\u5177\u4f53\u8868\u73b0\u4e1a\u52a1\u5f71\u54cd\u4f18\u5148\u7ea7<\/tr>\n<tbody>\n<tr>\n<td>SEO \u51e0\u4e4e\u4e3a\u96f6<\/td>\n<td>\u5ba2\u6237\u7aef\u6e32\u67d3\u4e3a\u4e3b&#xff0c;\u641c\u7d22\u5f15\u64ce\u6293\u53d6\u4e0d\u5230\u6b63\u6587<\/td>\n<td>\u535a\u5ba2\u65e0\u81ea\u7136\u6d41\u91cf<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<tr>\n<td>\u65e0\u7528\u6237\u4f53\u7cfb<\/td>\n<td>\u4ec5\u4f5c\u8005\u80fd\u53d1\u6587<\/td>\n<td>\u65e0\u6cd5\u8bc4\u8bba\/\u70b9\u8d5e\/\u4e92\u52a8<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<tr>\n<td>\u540e\u53f0\u4f53\u9a8c\u5dee<\/td>\n<td>\u5199\u6587\u7ae0\u9700\u8981\u624b\u52a8\u6539 md \u6587\u4ef6\u518d\u4e0a\u4f20<\/td>\n<td>\u53d1\u5e03\u8017\u65f6 5-10 \u5206\u949f<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<tr>\n<td>UI \u65e0\u6cd5\u6f14\u8fdb<\/td>\n<td>Flask Jinja \u6a21\u677f\u6539\u52a8\u6210\u672c\u6781\u9ad8<\/td>\n<td>\u89c6\u89c9\u4f53\u9a8c\u843d\u540e<\/td>\n<td>&#x1f7e2; P2<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>1.2 \u91cd\u6784\u76ee\u6807&#xff08;V2.5 \u7684\u9a8c\u6536\u6807\u51c6&#xff09;<\/h4>\n<ul>\n<li>\u2705 Lighthouse \u9996\u5c4f\u6027\u80fd 90&#043;<\/li>\n<li>\u2705 \u5b8c\u6574\u7684\u7528\u6237\u4f53\u7cfb&#xff1a;GitHub OAuth \u767b\u5f55\u3001\u4e2a\u4eba\u4e3b\u9875\u3001\u8bbe\u7f6e\u9875<\/li>\n<li>\u2705 \u5185\u5bb9\u6cbb\u7406\u80fd\u529b&#xff1a;\u4e13\u680f\u5ba1\u6838\u72b6\u6001\u673a&#xff08;DRAFT \u2192 PENDING \u2192 PUBLISHED&#xff09;<\/li>\n<li>\u2705 \u591a\u5a92\u4f53\u52a8\u6001&#xff1a;\u652f\u6301\u6587\u5b57 \/ \u591a\u56fe \/ \u89c6\u9891\u6df7\u53d1<\/li>\n<li>\u2705 \u53ef\u89c6\u5316\u7684\u7c89\u8272\u7cfb\u52a8\u6f2b\u98ce\u683c UI&#xff1a;\u6574\u5c4f\u89c6\u9891\u8f6e\u64ad &#043; \u6bdb\u73bb\u7483\u5bfc\u822a<\/li>\n<li>\u2705 \u5355\u673a\u53ef\u90e8\u7f72&#xff1a;1\u68382G \u8f7b\u91cf\u670d\u52a1\u5668\u8dd1\u5f97\u52a8<\/li>\n<\/ul>\n<h4>1.3 \u7248\u672c\u6f14\u8fdb\u8def\u5f84<\/h4>\n<p>V1.0  Flask &#043; SQLite &#043; Jinja \u6a21\u677f&#xff08;\u5355\u4f53&#xff09;<br \/>\nV1.3  Flask &#043; \u4e00\u70b9\u5ba2\u6237\u7aef\u6e32\u67d3&#xff08;SEO \u95ee\u9898\u51f8\u663e&#xff09;<br \/>\n  \u2502<br \/>\n  \u251c\u2500\u2500 \u65ad\u70b9\u91cd\u6784 \u2500\u2500\u25ba<br \/>\n  \u2502<br \/>\nV2.0  Next.js 14 &#043; App Router &#043; Prisma &#043; PostgreSQL&#xff08;\u57fa\u7840\u9aa8\u67b6&#xff09;<br \/>\nV2.3  \u7528\u6237\u7cfb\u7edf &#043; GitHub OAuth&#xff08;\u95ed\u73af\u53ef\u7528&#xff09;<br \/>\nV2.5  \u4e13\u680f\u5ba1\u6838\u72b6\u6001\u673a &#043; \u52a8\u6001\u677f\u5757\u5408\u5e76 &#043; \u89c6\u89c9\u5927\u6539&#xff08;\u5f53\u524d\u7248\u672c&#xff09;<\/p>\n<p>#mermaid-svg-h4eHmG0qAGnpdQGH{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-h4eHmG0qAGnpdQGH .error-icon{fill:#552222;}#mermaid-svg-h4eHmG0qAGnpdQGH .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-h4eHmG0qAGnpdQGH .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-h4eHmG0qAGnpdQGH .marker{fill:#333333;stroke:#333333;}#mermaid-svg-h4eHmG0qAGnpdQGH .marker.cross{stroke:#333333;}#mermaid-svg-h4eHmG0qAGnpdQGH svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-h4eHmG0qAGnpdQGH p{margin:0;}#mermaid-svg-h4eHmG0qAGnpdQGH .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-h4eHmG0qAGnpdQGH .cluster-label text{fill:#333;}#mermaid-svg-h4eHmG0qAGnpdQGH .cluster-label span{color:#333;}#mermaid-svg-h4eHmG0qAGnpdQGH .cluster-label span p{background-color:transparent;}#mermaid-svg-h4eHmG0qAGnpdQGH .label text,#mermaid-svg-h4eHmG0qAGnpdQGH span{fill:#333;color:#333;}#mermaid-svg-h4eHmG0qAGnpdQGH .node rect,#mermaid-svg-h4eHmG0qAGnpdQGH .node circle,#mermaid-svg-h4eHmG0qAGnpdQGH .node ellipse,#mermaid-svg-h4eHmG0qAGnpdQGH .node polygon,#mermaid-svg-h4eHmG0qAGnpdQGH .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-h4eHmG0qAGnpdQGH .rough-node .label text,#mermaid-svg-h4eHmG0qAGnpdQGH .node .label text,#mermaid-svg-h4eHmG0qAGnpdQGH .image-shape .label,#mermaid-svg-h4eHmG0qAGnpdQGH .icon-shape .label{text-anchor:middle;}#mermaid-svg-h4eHmG0qAGnpdQGH .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-h4eHmG0qAGnpdQGH .rough-node .label,#mermaid-svg-h4eHmG0qAGnpdQGH .node .label,#mermaid-svg-h4eHmG0qAGnpdQGH .image-shape .label,#mermaid-svg-h4eHmG0qAGnpdQGH .icon-shape .label{text-align:center;}#mermaid-svg-h4eHmG0qAGnpdQGH .node.clickable{cursor:pointer;}#mermaid-svg-h4eHmG0qAGnpdQGH .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-h4eHmG0qAGnpdQGH .arrowheadPath{fill:#333333;}#mermaid-svg-h4eHmG0qAGnpdQGH .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-h4eHmG0qAGnpdQGH .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-h4eHmG0qAGnpdQGH .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-h4eHmG0qAGnpdQGH .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-h4eHmG0qAGnpdQGH .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-h4eHmG0qAGnpdQGH .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-h4eHmG0qAGnpdQGH .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-h4eHmG0qAGnpdQGH .cluster text{fill:#333;}#mermaid-svg-h4eHmG0qAGnpdQGH .cluster span{color:#333;}#mermaid-svg-h4eHmG0qAGnpdQGH div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-h4eHmG0qAGnpdQGH .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-h4eHmG0qAGnpdQGH rect.text{fill:none;stroke-width:0;}#mermaid-svg-h4eHmG0qAGnpdQGH .icon-shape,#mermaid-svg-h4eHmG0qAGnpdQGH .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-h4eHmG0qAGnpdQGH .icon-shape p,#mermaid-svg-h4eHmG0qAGnpdQGH .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-h4eHmG0qAGnpdQGH .icon-shape .label rect,#mermaid-svg-h4eHmG0qAGnpdQGH .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-h4eHmG0qAGnpdQGH .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-h4eHmG0qAGnpdQGH .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-h4eHmG0qAGnpdQGH :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"nodeLabel\"><\/p>\n<p>V1.0 Flask &#043; SQLite \u5355\u4f53<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>V1.3 \u5f15\u5165\u5ba2\u6237\u7aef\u6e32\u67d3<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u65ad\u70b9\u91cd\u6784<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>V2.0 Next.js 14 &#043; Prisma &#043; PostgreSQL<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>V2.3 \u7528\u6237\u7cfb\u7edf &#043; GitHub OAuth<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>V2.5 \u5ba1\u6838\u72b6\u6001\u673a &#043; \u52a8\u6001\u5408\u5e76 &#043; \u89c6\u89c9\u5927\u6539&#xff08;\u5f53\u524d\u7248\u672c&#xff09;<\/p>\n<p><\/span><\/p>\n<hr \/>\n<h3>\u4e8c\u3001\u6280\u672f\u9009\u578b\u4e0e\u67b6\u6784\u8bbe\u8ba1<\/h3>\n<h4>2.1 \u6280\u672f\u6808\u5168\u666f<\/h4>\n<table>\n<tr>\u5206\u5c42\u6280\u672f\u7248\u672c\u6838\u5fc3\u5b9a\u4f4d<\/tr>\n<tbody>\n<tr>\n<td>\u6e32\u67d3\u6846\u67b6<\/td>\n<td>Next.js (App Router)<\/td>\n<td>16.4.3<\/td>\n<td>\u8def\u7531 &#043; SSR\/SSG\/ISR &#043; API Route<\/td>\n<\/tr>\n<tr>\n<td>\u8bed\u8a00<\/td>\n<td>TypeScript<\/td>\n<td>5.x<\/td>\n<td>\u5168\u94fe\u8def\u7c7b\u578b\u5b89\u5168<\/td>\n<\/tr>\n<tr>\n<td>\u6570\u636e\u5c42<\/td>\n<td>Prisma ORM<\/td>\n<td>6.19.3<\/td>\n<td>schema \u9a71\u52a8 &#043; \u7c7b\u578b\u751f\u6210<\/td>\n<\/tr>\n<tr>\n<td>\u6570\u636e\u5e93<\/td>\n<td>PostgreSQL<\/td>\n<td>16<\/td>\n<td>\u5168\u6587\u641c\u7d22 &#043; JSONB &#043; \u751f\u6210\u5217<\/td>\n<\/tr>\n<tr>\n<td>\u6837\u5f0f<\/td>\n<td>Tailwind CSS<\/td>\n<td>4<\/td>\n<td>\u539f\u5b50\u5316 &#043; CSS \u53d8\u91cf\u4e3b\u9898<\/td>\n<\/tr>\n<tr>\n<td>\u8ba4\u8bc1<\/td>\n<td>\u81ea\u5efa JWT &#043; GitHub OAuth<\/td>\n<td>\u2014<\/td>\n<td>\u8f7b\u91cf\u3001\u53ef\u63a7\u3001\u53ef\u5b9a\u5236<\/td>\n<\/tr>\n<tr>\n<td>\u8fdb\u7a0b\u7ba1\u7406<\/td>\n<td>PM2<\/td>\n<td>5.x<\/td>\n<td>\u5b88\u62a4 &#043; \u5f00\u673a\u81ea\u542f &#043; \u65e5\u5fd7<\/td>\n<\/tr>\n<tr>\n<td>\u53cd\u5411\u4ee3\u7406<\/td>\n<td>Nginx<\/td>\n<td>\u7a33\u5b9a\u7248<\/td>\n<td>TLS \u7ec8\u6b62 &#043; \u9759\u6001\u8d44\u6e90 &#043; \u9650\u6d41<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>2.2 \u67b6\u6784\u5206\u5c42<\/h4>\n<p>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u2502  \u6d4f\u89c8\u5668 \/ \u722c\u866b                                     \u2502<br \/>\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<br \/>\n                  \u2502  HTTP(S)<br \/>\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25bc\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u2502  Nginx  (80 \/ 443)                               \u2502<br \/>\n\u2502  \u00b7 TLS \u7ec8\u6b62   \u00b7 \u9759\u6001\u8d44\u6e90  \u00b7 gzip  \u00b7 \u9650\u6d41          \u2502<br \/>\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<br \/>\n                  \u2502  proxy_pass 127.0.0.1:3000<br \/>\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25bc\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u2502  Next.js 16 (PM2 \u5b88\u62a4)                            \u2502<br \/>\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502<br \/>\n\u2502  \u2502  App Router  (RSC \u670d\u52a1\u7aef\u7ec4\u4ef6 &#043; \u5ba2\u6237\u7aef\u7ec4\u4ef6)   \u2502  \u2502<br \/>\n\u2502  \u2502  \u251c\u2500\u2500 \u9875\u9762\u8def\u7531  \/, \/post\/[slug], \/u\/[name]   \u2502  \u2502<br \/>\n\u2502  \u2502  \u2514\u2500\u2500 API \u8def\u7531 \/api\/auth\/*, \/api\/me          \u2502  \u2502<br \/>\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502<br \/>\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502<br \/>\n\u2502  \u2502  Prisma Client (\u8fde\u63a5\u6c60 &#043; \u7c7b\u578b\u5316\u67e5\u8be2)         \u2502  \u2502<br \/>\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502<br \/>\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<br \/>\n                  \u2502<br \/>\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25bc\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u2502  PostgreSQL 16  (\u672c\u5730 socket \u8fde\u63a5)               \u2502<br \/>\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n<p>\u5bf9\u5e94\u7684\u5206\u5c42\u5173\u7cfb\u4e5f\u53ef\u4ee5\u7528\u6d41\u7a0b\u56fe\u8868\u793a&#xff1a;<\/p>\n<p>#mermaid-svg-eIXJvDcJUfrFXZmH{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-eIXJvDcJUfrFXZmH .error-icon{fill:#552222;}#mermaid-svg-eIXJvDcJUfrFXZmH .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-eIXJvDcJUfrFXZmH .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-eIXJvDcJUfrFXZmH .marker{fill:#333333;stroke:#333333;}#mermaid-svg-eIXJvDcJUfrFXZmH .marker.cross{stroke:#333333;}#mermaid-svg-eIXJvDcJUfrFXZmH svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-eIXJvDcJUfrFXZmH p{margin:0;}#mermaid-svg-eIXJvDcJUfrFXZmH .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-eIXJvDcJUfrFXZmH .cluster-label text{fill:#333;}#mermaid-svg-eIXJvDcJUfrFXZmH .cluster-label span{color:#333;}#mermaid-svg-eIXJvDcJUfrFXZmH .cluster-label span p{background-color:transparent;}#mermaid-svg-eIXJvDcJUfrFXZmH .label text,#mermaid-svg-eIXJvDcJUfrFXZmH span{fill:#333;color:#333;}#mermaid-svg-eIXJvDcJUfrFXZmH .node rect,#mermaid-svg-eIXJvDcJUfrFXZmH .node circle,#mermaid-svg-eIXJvDcJUfrFXZmH .node ellipse,#mermaid-svg-eIXJvDcJUfrFXZmH .node polygon,#mermaid-svg-eIXJvDcJUfrFXZmH .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-eIXJvDcJUfrFXZmH .rough-node .label text,#mermaid-svg-eIXJvDcJUfrFXZmH .node .label text,#mermaid-svg-eIXJvDcJUfrFXZmH .image-shape .label,#mermaid-svg-eIXJvDcJUfrFXZmH .icon-shape .label{text-anchor:middle;}#mermaid-svg-eIXJvDcJUfrFXZmH .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-eIXJvDcJUfrFXZmH .rough-node .label,#mermaid-svg-eIXJvDcJUfrFXZmH .node .label,#mermaid-svg-eIXJvDcJUfrFXZmH .image-shape .label,#mermaid-svg-eIXJvDcJUfrFXZmH .icon-shape .label{text-align:center;}#mermaid-svg-eIXJvDcJUfrFXZmH .node.clickable{cursor:pointer;}#mermaid-svg-eIXJvDcJUfrFXZmH .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-eIXJvDcJUfrFXZmH .arrowheadPath{fill:#333333;}#mermaid-svg-eIXJvDcJUfrFXZmH .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-eIXJvDcJUfrFXZmH .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-eIXJvDcJUfrFXZmH .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-eIXJvDcJUfrFXZmH .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-eIXJvDcJUfrFXZmH .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-eIXJvDcJUfrFXZmH .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-eIXJvDcJUfrFXZmH .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-eIXJvDcJUfrFXZmH .cluster text{fill:#333;}#mermaid-svg-eIXJvDcJUfrFXZmH .cluster span{color:#333;}#mermaid-svg-eIXJvDcJUfrFXZmH div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-eIXJvDcJUfrFXZmH .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-eIXJvDcJUfrFXZmH rect.text{fill:none;stroke-width:0;}#mermaid-svg-eIXJvDcJUfrFXZmH .icon-shape,#mermaid-svg-eIXJvDcJUfrFXZmH .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-eIXJvDcJUfrFXZmH .icon-shape p,#mermaid-svg-eIXJvDcJUfrFXZmH .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-eIXJvDcJUfrFXZmH .icon-shape .label rect,#mermaid-svg-eIXJvDcJUfrFXZmH .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-eIXJvDcJUfrFXZmH .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-eIXJvDcJUfrFXZmH .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-eIXJvDcJUfrFXZmH :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<span class=\"edgeLabel\"><\/p>\n<p>HTTP(S)<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/p>\n<p>proxy_pass 127.0.0.1:3000<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/p>\n<p>\u672c\u5730 socket<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/span><span class=\"nodeLabel\"><\/p>\n<p>App Router<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u9875\u9762\u8def\u7531 \/ \u00b7 \/post\/[slug] \u00b7 \/u\/[name]<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>API \u8def\u7531 \/api\/auth\/* \u00b7 \/api\/me<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u6d4f\u89c8\u5668 \/ \u722c\u866b<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>Nginx 80\/443TLS \u7ec8\u6b62 \u00b7 \u9759\u6001\u8d44\u6e90 \u00b7 gzip \u00b7 \u9650\u6d41<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>Next.js 16&#xff08;PM2 \u5b88\u62a4&#xff09;<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>Prisma Client&#xff08;\u8fde\u63a5\u6c60 &#043; \u7c7b\u578b\u5316\u67e5\u8be2&#xff09;<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>PostgreSQL 16<\/p>\n<p><\/span><\/p>\n<h4>2.3 \u4e09\u4e2a\u5173\u952e\u9009\u578b\u51b3\u7b56<\/h4>\n<p>\u51b3\u7b56 1&#xff1a;\u4e3a\u4ec0\u4e48\u4e0d\u7528 NextAuth&#xff0c;\u800c\u8981\u81ea\u5efa JWT&#xff1f;<\/p>\n<p>NextAuth \u529f\u80fd\u5168\u9762&#xff0c;\u4f46\u5bf9\u6211\u4eec\u8fd9\u79cd\u5b9a\u5236\u5316\u4f1a\u8bdd\u5b57\u6bb5&#xff08;\u6bd4\u5982\u89d2\u8272 role\u3001\u5ba1\u6838\u6743\u9650&#xff09;\u7684\u573a\u666f&#xff0c;\u9700\u8981\u4e0d\u65ad\u5199\u56de\u8c03&#xff08;jwt \/ session callbacks&#xff09;&#xff0c;\u53cd\u800c\u589e\u52a0\u5fc3\u667a\u8d1f\u62c5\u3002\u81ea\u5efa JWT \u7684\u597d\u5904&#xff1a;<\/p>\n<ul>\n<li>\u4f1a\u8bdd\u5b57\u6bb5\u5b8c\u5168\u53ef\u63a7&#xff08;\u53ea\u653e userId &#043; role&#xff09;<\/li>\n<li>GitHub OAuth \u7684\u56de\u8c03\u6d41\u4e00\u76ee\u4e86\u7136&#xff08;\u4e24\u6b65\u8d70&#xff1a;\u62ff code \u6362 token \u2192 \u62ff token \u6362 user&#xff09;<\/li>\n<li>\u540e\u7eed\u8981\u63a5\u5fae\u4fe1 \/ QQ \u767b\u5f55&#xff0c;\u53ea\u9700\u8981\u65b0\u589e\u56de\u8c03\u8def\u7531<\/li>\n<\/ul>\n<p>\u26a0\ufe0f \u91cd\u8981\u539f\u5219&#xff1a;\u4f1a\u8bdd\u91cc\u53ea\u5b58\u6807\u8bc6&#xff08;userId\u3001role&#xff09;&#xff0c;\u6240\u6709\u5c55\u793a\u6570\u636e\u4ece DB \u5b9e\u65f6\u8bfb\u53d6\u3002\u8fd9\u6837\u4fee\u6539\u6635\u79f0\u3001\u5934\u50cf\u540e\u80fd\u7acb\u523b\u751f\u6548&#xff08;\u8fd9\u5c31\u662f\u8e29\u5751 3 \u7684\u7ecf\u9a8c&#xff09;\u3002<\/p>\n<p>\u51b3\u7b56 2&#xff1a;\u4e3a\u4ec0\u4e48\u7528 PostgreSQL \u800c\u4e0d\u662f\u7ee7\u7eed\u7528 SQLite&#xff1f;<\/p>\n<table>\n<tr>\u7ef4\u5ea6SQLitePostgreSQL\u6211\u4eec\u7684\u9700\u6c42<\/tr>\n<tbody>\n<tr>\n<td>\u5e76\u53d1\u5199<\/td>\n<td>\u5355\u6587\u4ef6\u9501<\/td>\n<td>MVCC \u652f\u6301<\/td>\n<td>\u2705 \u9700\u8981<\/td>\n<\/tr>\n<tr>\n<td>\u5168\u6587\u641c\u7d22<\/td>\n<td>FTS5 \u591f\u7528<\/td>\n<td>tsvector &#043; GIN \u7d22\u5f15<\/td>\n<td>\u2705 \u4e2d\u6587\u5206\u8bcd\u9700\u6c42<\/td>\n<\/tr>\n<tr>\n<td>JSON \u5b57\u6bb5<\/td>\n<td>\u652f\u6301\u4f46\u67e5\u8be2\u5f31<\/td>\n<td>JSONB &#043; GIN<\/td>\n<td>\u2705 \u52a8\u6001\u677f\u5757\u5143\u6570\u636e<\/td>\n<\/tr>\n<tr>\n<td>\u751f\u6210\u5217<\/td>\n<td>\u4e0d\u652f\u6301<\/td>\n<td>\u652f\u6301<\/td>\n<td>\u2705 searchVector \u751f\u6210\u5217<\/td>\n<\/tr>\n<tr>\n<td>\u8fd0\u7ef4<\/td>\n<td>\u96f6\u6210\u672c<\/td>\n<td>\u9700\u5b89\u88c5<\/td>\n<td>\u26a0\ufe0f \u53ef\u63a5\u53d7<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u51b3\u7b56 3&#xff1a;\u4e3a\u4ec0\u4e48\u7528 App Router \u800c\u4e0d\u662f Pages Router&#xff1f;<\/p>\n<ul>\n<li>Server Components \u662f\u9ed8\u8ba4&#xff1a;\u9875\u9762\u9ed8\u8ba4\u5728\u670d\u52a1\u7aef\u6e32\u67d3&#xff0c;\u5ba2\u6237\u7aef bundle \u5929\u7136\u66f4\u5c0f<\/li>\n<li>\u6df7\u5408\u6e32\u67d3\u7c92\u5ea6&#xff1a;\u540c\u4e00\u9875\u9762\u5185&#xff0c;RSC \u53ef\u4ee5 SSR&#xff0c;\u800c\u8bc4\u8bba\u7ec4\u4ef6\u53ef\u4ee5\u8d70\u5ba2\u6237\u7aef CSR<\/li>\n<li>Parallel Routes \/ Intercepting Routes&#xff1a;\u540e\u7eed\u505a\u56fe\u7247\u9884\u89c8\u5f39\u7a97\u4f1a\u5f88\u65b9\u4fbf<\/li>\n<li>\u6d41\u5f0f\u6e32\u67d3&#xff1a;loading.tsx \u81ea\u52a8\u751f\u6210 Suspense \u8fb9\u754c<\/li>\n<\/ul>\n<hr \/>\n<h3>\u4e09\u3001\u6838\u5fc3\u529f\u80fd\u5b9e\u73b0<\/h3>\n<h4>3.1 &#x1f3a8; \u89c6\u89c9\u7cfb\u7edf<\/h4>\n<p>\u89c6\u89c9\u90e8\u5206\u8fed\u4ee3\u4e86 7 \u4e2a\u7248\u672c&#xff0c;\u6700\u7ec8\u65b9\u6848&#xff1a;<\/p>\n<table>\n<tr>\u6548\u679c\u5b9e\u73b0\u65b9\u5f0f\u6027\u80fd\u6ce8\u610f<\/tr>\n<tbody>\n<tr>\n<td>\u6574\u5c4f\u89c6\u9891\u8f6e\u64ad<\/td>\n<td>\u9996\u5c4f 3 \u4e2a &lt;video&gt; \u53e0\u52a0 &#043; CSS opacity \u8fc7\u6e21<\/td>\n<td>\u79fb\u52a8\u7aef\u964d\u7ea7\u4e3a\u9759\u6001\u5c01\u9762<\/td>\n<\/tr>\n<tr>\n<td>\u5168\u5c40\u89c6\u9891\u80cc\u666f<\/td>\n<td>\u56fa\u5b9a\u5b9a\u4f4d &#043; filter: blur(20px)<\/td>\n<td>preload&#061;\u201cmetadata\u201d<\/td>\n<\/tr>\n<tr>\n<td>\u7c89\u8272\u5149\u70b9\u9f20\u6807\u8ddf\u968f<\/td>\n<td>Canvas &#043; requestAnimationFrame<\/td>\n<td>\u5378\u8f7d\u65f6 cancelAnimationFrame<\/td>\n<\/tr>\n<tr>\n<td>\u6bdb\u73bb\u7483\u5bfc\u822a\u680f<\/td>\n<td>backdrop-filter: blur(12px)<\/td>\n<td>\u52a0 -webkit- \u517c\u5bb9\u524d\u7f00<\/td>\n<\/tr>\n<tr>\n<td>\u5361\u7247\u60ac\u505c 3D<\/td>\n<td>transform: perspective() rotateX()<\/td>\n<td>\u52a0 will-change: transform<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&#x1f4a1; \u89c6\u89c9\u9009\u578b\u7684\u7ecf\u9a8c&#xff1a;\u8bd5\u8fc7\u7c92\u5b50\u8fde\u7ebf\u30013D \u7c92\u5b50\u7403\u3001\u6781\u5149\u3001\u661f\u7a7a\u6708\u5149\u7b49 6 \u79cd\u65b9\u6848&#xff0c;\u6700\u7ec8\u9009\u89c6\u9891\u80cc\u666f\u3002\u8d8a\u590d\u6742\u7684\u52a8\u6548\u8d8a\u5bb9\u6613\u55a7\u5bbe\u593a\u4e3b&#xff0c;\u535a\u5ba2\u7684\u6838\u5fc3\u6c38\u8fdc\u662f\u5185\u5bb9\u3002<\/p>\n<h4>3.2 \u270d\ufe0f \u6587\u7ae0\u7cfb\u7edf<\/h4>\n<p>\u5b8c\u6574\u7684\u5185\u5bb9\u521b\u4f5c\u95ed\u73af&#xff1a;<\/p>\n<ul>\n<li>Markdown \u7f16\u8f91\u5668 &#043; \u4e0a\u4f20 .md \u6587\u4ef6\u76f4\u63a5\u5bfc\u5165<\/li>\n<li>\u5206\u7c7b \/ \u6807\u7b7e&#xff08;\u4e0b\u62c9\u641c\u7d22&#xff09;\/ \u4e13\u680f\u4e09\u7ea7\u5206\u7c7b<\/li>\n<li>\u8349\u7a3f \/ \u53d1\u5e03\u72b6\u6001\u673a<\/li>\n<li>\u5c01\u9762\u56fe\u4e0a\u4f20<\/li>\n<li>\u4ee3\u7801\u9ad8\u4eae&#xff08;Shiki&#xff09;&#043; \u4e00\u952e\u590d\u5236<\/li>\n<\/ul>\n<p>\u5173\u952e\u4ea4\u4e92&#xff1a;\u5206\u7c7b\u3001\u6807\u7b7e\u3001\u4e13\u680f\u9009\u62e9\u76f4\u63a5\u653e\u5728\u6807\u9898\u4e0b\u65b9&#xff0c;\u7528\u6237\u65e0\u9700\u6eda\u52a8\u5230\u5e95\u90e8\u3002\u6807\u7b7e\u7528 &lt;datalist&gt; \u4e0b\u62c9\u641c\u7d22&#xff0c;\u907f\u514d\u6807\u7b7e\u7206\u70b8\u3002<\/p>\n<h4>3.3 &#x1f465; \u7528\u6237\u7cfb\u7edf&#xff08;\u542b\u5173\u952e\u4ee3\u7801&#xff09;<\/h4>\n<p>\u6570\u636e\u6a21\u578b<\/p>\n<p>\/\/ prisma\/schema.prisma<br \/>\ndatasource db {<br \/>\n  provider &#061; &#034;postgresql&#034;<br \/>\n  url      &#061; env(&#034;DATABASE_URL&#034;)<br \/>\n}<\/p>\n<p>generator client {<br \/>\n  provider &#061; &#034;prisma-client-js&#034;<br \/>\n}<\/p>\n<p>enum UserRole {<br \/>\n  USER<br \/>\n  ADMIN<br \/>\n}<\/p>\n<p>model User {<br \/>\n  id        String   &#064;id &#064;default(cuid())<br \/>\n  githubId  String?  &#064;unique<br \/>\n  name      String<br \/>\n  avatar    String?<br \/>\n  bio       String?<br \/>\n  role      UserRole &#064;default(USER)<br \/>\n  posts     Post[]<br \/>\n  columns   Column[]<br \/>\n  createdAt DateTime &#064;default(now())<br \/>\n  updatedAt DateTime &#064;updatedAt<\/p>\n<p>  &#064;&#064;index([githubId])<br \/>\n}<\/p>\n<p>\u4f1a\u8bdd\u5de5\u5177&#xff08;JWT \u7b7e\u53d1\u4e0e\u6821\u9a8c&#xff09;<\/p>\n<p><span class=\"token comment\">\/\/ lib\/session.ts<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> SignJWT<span class=\"token punctuation\">,<\/span> jwtVerify <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;jose&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> cookies <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;next\/headers&#039;<\/span><\/p>\n<p><span class=\"token keyword\">const<\/span> secret <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextEncoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">encode<\/span><span class=\"token punctuation\">(<\/span>process<span class=\"token punctuation\">.<\/span>env<span class=\"token punctuation\">.<\/span><span class=\"token constant\">SESSION_SECRET<\/span><span class=\"token operator\">!<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token keyword\">const<\/span> <span class=\"token constant\">COOKIE_NAME<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;session&#039;<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">interface<\/span> <span class=\"token class-name\">SessionPayload<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  userId<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  role<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;USER&#039;<\/span> <span class=\"token operator\">|<\/span> <span class=\"token string\">&#039;ADMIN&#039;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/** \u7b7e\u53d1\u4f1a\u8bdd *\/<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">createSession<\/span><span class=\"token punctuation\">(<\/span>payload<span class=\"token operator\">:<\/span> SessionPayload<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> token <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">SignJWT<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token operator\">&#8230;<\/span>payload <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">setProtectedHeader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> alg<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;HS256&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">setIssuedAt<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">setExpirationTime<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;7d&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">sign<\/span><span class=\"token punctuation\">(<\/span>secret<span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token keyword\">const<\/span> cookieStore <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">cookies<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  cookieStore<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">COOKIE_NAME<\/span><span class=\"token punctuation\">,<\/span> token<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    httpOnly<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    sameSite<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;lax&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    secure<span class=\"token operator\">:<\/span> process<span class=\"token punctuation\">.<\/span>env<span class=\"token punctuation\">.<\/span><span class=\"token constant\">NODE_ENV<\/span> <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token string\">&#039;production&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    path<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;\/&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    maxAge<span class=\"token operator\">:<\/span> <span class=\"token number\">60<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">60<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">24<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">7<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/** \u89e3\u6790\u4f1a\u8bdd&#xff08;\u670d\u52a1\u7aef\u7ec4\u4ef6 \/ API Route \u4e2d\u4f7f\u7528&#xff09; *\/<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">getSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">Promise<\/span><span class=\"token operator\">&lt;<\/span>SessionPayload <span class=\"token operator\">|<\/span> <span class=\"token keyword\">null<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> cookieStore <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">cookies<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> token <span class=\"token operator\">&#061;<\/span> cookieStore<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">COOKIE_NAME<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">?.<\/span>value<br \/>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>token<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">null<\/span><br \/>\n  <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> payload <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">jwtVerify<\/span><span class=\"token punctuation\">(<\/span>token<span class=\"token punctuation\">,<\/span> secret<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> payload <span class=\"token keyword\">as<\/span> <span class=\"token builtin\">unknown<\/span> <span class=\"token keyword\">as<\/span> SessionPayload<br \/>\n  <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">null<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>&#x1f511; \u4f7f\u7528 jose \u800c\u4e0d\u662f jsonwebtoken&#xff1a;jose \u57fa\u4e8e Web Crypto API&#xff0c;\u5728 Edge Runtime&#xff08;Next.js Middleware&#xff09;\u4e2d\u53ef\u76f4\u63a5\u8fd0\u884c&#xff1b;jsonwebtoken \u4f9d\u8d56 Node \u539f\u751f\u6a21\u5757&#xff0c;\u5728 Edge \u73af\u5883\u4e0b\u4e0d\u53ef\u7528\u3002<\/p>\n<p>\/api\/me \u63a5\u53e3&#xff08;\u89e3\u51b3\u6635\u79f0\u4e0d\u540c\u6b65&#xff09;<\/p>\n<p><span class=\"token comment\">\/\/ app\/api\/me\/route.ts<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> NextResponse <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;next\/server&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> prisma <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/lib\/prisma&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> getSession <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/lib\/session&#039;<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> dynamic <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;force-dynamic&#039;<\/span> <span class=\"token comment\">\/\/ \u5f3a\u5236\u4e0d\u7f13\u5b58<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token constant\">GET<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> session <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">getSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>session<span class=\"token operator\">?.<\/span>userId<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> NextResponse<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> user<span class=\"token operator\">:<\/span> <span class=\"token keyword\">null<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> status<span class=\"token operator\">:<\/span> <span class=\"token number\">401<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5173\u952e&#xff1a;\u6bcf\u6b21\u90fd\u4ece DB \u53d6\u6700\u65b0\u6570\u636e&#xff0c;\u907f\u514d\u4f1a\u8bdd\u91cc\u6570\u636e\u8fc7\u671f<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> user <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">.<\/span><span class=\"token function\">findUnique<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> id<span class=\"token operator\">:<\/span> session<span class=\"token punctuation\">.<\/span>userId <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    select<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> id<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> name<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> avatar<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> bio<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> role<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token keyword\">return<\/span> NextResponse<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> user <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>GitHub OAuth \u4e24\u6b65\u8d70&#xff08;\u6838\u5fc3\u903b\u8f91&#xff09;<\/p>\n<p><span class=\"token comment\">\/\/ app\/api\/auth\/callback\/github\/route.ts<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> NextRequest<span class=\"token punctuation\">,<\/span> NextResponse <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;next\/server&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> prisma <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/lib\/prisma&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> createSession <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/lib\/session&#039;<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token constant\">GET<\/span><span class=\"token punctuation\">(<\/span>req<span class=\"token operator\">:<\/span> NextRequest<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> code <span class=\"token operator\">&#061;<\/span> req<span class=\"token punctuation\">.<\/span>nextUrl<span class=\"token punctuation\">.<\/span>searchParams<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;code&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>code<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> NextResponse<span class=\"token punctuation\">.<\/span><span class=\"token function\">redirect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\"><span class=\"token constant\">URL<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\/login?error&#061;no_code&#039;<\/span><span class=\"token punctuation\">,<\/span> req<span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ Step 1: code \u2192 access_token<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> tokenRes <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;https:\/\/github.com\/login\/oauth\/access_token&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    method<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;POST&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> Accept<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;application\/json&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-property property\">&#039;Content-Type&#039;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;application\/json&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    body<span class=\"token operator\">:<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n      client_id<span class=\"token operator\">:<\/span> process<span class=\"token punctuation\">.<\/span>env<span class=\"token punctuation\">.<\/span><span class=\"token constant\">GITHUB_CLIENT_ID<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      client_secret<span class=\"token operator\">:<\/span> process<span class=\"token punctuation\">.<\/span>env<span class=\"token punctuation\">.<\/span><span class=\"token constant\">GITHUB_CLIENT_SECRET<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      code<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> access_token <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> tokenRes<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ Step 2: token \u2192 user info<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> userRes <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;https:\/\/api.github.com\/user&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    headers<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> Authorization<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">Bearer <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>access_token<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> ghUser <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> userRes<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ Step 3: upsert \u5230 DB<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> user <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">.<\/span><span class=\"token function\">upsert<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> githubId<span class=\"token operator\">:<\/span> <span class=\"token function\">String<\/span><span class=\"token punctuation\">(<\/span>ghUser<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    update<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> name<span class=\"token operator\">:<\/span> ghUser<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">??<\/span> ghUser<span class=\"token punctuation\">.<\/span>login<span class=\"token punctuation\">,<\/span> avatar<span class=\"token operator\">:<\/span> ghUser<span class=\"token punctuation\">.<\/span>avatar_url <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    create<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      githubId<span class=\"token operator\">:<\/span> <span class=\"token function\">String<\/span><span class=\"token punctuation\">(<\/span>ghUser<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      name<span class=\"token operator\">:<\/span> ghUser<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">??<\/span> ghUser<span class=\"token punctuation\">.<\/span>login<span class=\"token punctuation\">,<\/span><br \/>\n      avatar<span class=\"token operator\">:<\/span> ghUser<span class=\"token punctuation\">.<\/span>avatar_url<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token keyword\">await<\/span> <span class=\"token function\">createSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> userId<span class=\"token operator\">:<\/span> user<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">,<\/span> role<span class=\"token operator\">:<\/span> user<span class=\"token punctuation\">.<\/span>role <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">return<\/span> NextResponse<span class=\"token punctuation\">.<\/span><span class=\"token function\">redirect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\"><span class=\"token constant\">URL<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\/&#039;<\/span><span class=\"token punctuation\">,<\/span> req<span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u26a0\ufe0f \u6ce8\u610f&#xff1a;\u771f\u5b9e\u9879\u76ee\u4e2d\u9700\u8981\u6821\u9a8c state \u53c2\u6570\u9632 CSRF&#xff0c;\u8fd9\u91cc\u4e3a\u4e86\u805a\u7126\u4e3b\u6d41\u7a0b\u7701\u7565\u4e86\u3002\u751f\u4ea7\u73af\u5883\u52a1\u5fc5\u5b9e\u73b0\u3002<\/p>\n<p>\u6574\u4e2a\u767b\u5f55\u6d41\u7a0b\u53ef\u4ee5\u6982\u62ec\u4e3a&#xff1a;<\/p>\n<p>PostgreSQLGitHubNext.js \u670d\u52a1\u7aef\u7528\u6237\u6d4f\u89c8\u5668PostgreSQLGitHubNext.js \u670d\u52a1\u7aef\u7528\u6237\u6d4f\u89c8\u5668#mermaid-svg-ou1yicPyBAC4IG16{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-ou1yicPyBAC4IG16 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-ou1yicPyBAC4IG16 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-ou1yicPyBAC4IG16 .error-icon{fill:#552222;}#mermaid-svg-ou1yicPyBAC4IG16 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ou1yicPyBAC4IG16 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-ou1yicPyBAC4IG16 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ou1yicPyBAC4IG16 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ou1yicPyBAC4IG16 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-ou1yicPyBAC4IG16 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ou1yicPyBAC4IG16 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ou1yicPyBAC4IG16 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ou1yicPyBAC4IG16 .marker.cross{stroke:#333333;}#mermaid-svg-ou1yicPyBAC4IG16 svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ou1yicPyBAC4IG16 p{margin:0;}#mermaid-svg-ou1yicPyBAC4IG16 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ou1yicPyBAC4IG16 text.actor&gt;tspan{fill:black;stroke:none;}#mermaid-svg-ou1yicPyBAC4IG16 .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-ou1yicPyBAC4IG16 .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-ou1yicPyBAC4IG16 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-ou1yicPyBAC4IG16 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-ou1yicPyBAC4IG16 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-ou1yicPyBAC4IG16 .sequenceNumber{fill:white;}#mermaid-svg-ou1yicPyBAC4IG16 #sequencenumber{fill:#333;}#mermaid-svg-ou1yicPyBAC4IG16 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-ou1yicPyBAC4IG16 .messageText{fill:#333;stroke:none;}#mermaid-svg-ou1yicPyBAC4IG16 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ou1yicPyBAC4IG16 .labelText,#mermaid-svg-ou1yicPyBAC4IG16 .labelText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-ou1yicPyBAC4IG16 .loopText,#mermaid-svg-ou1yicPyBAC4IG16 .loopText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-ou1yicPyBAC4IG16 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-ou1yicPyBAC4IG16 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ou1yicPyBAC4IG16 .noteText,#mermaid-svg-ou1yicPyBAC4IG16 .noteText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-ou1yicPyBAC4IG16 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ou1yicPyBAC4IG16 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ou1yicPyBAC4IG16 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ou1yicPyBAC4IG16 .actorPopupMenu{position:absolute;}#mermaid-svg-ou1yicPyBAC4IG16 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 \/ 0.4));}#mermaid-svg-ou1yicPyBAC4IG16 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ou1yicPyBAC4IG16 .actor-man circle,#mermaid-svg-ou1yicPyBAC4IG16 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-ou1yicPyBAC4IG16 :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}\u70b9\u51fb\u300cGitHub \u767b\u5f55\u300d\u91cd\u5b9a\u5411\u5230\u6388\u6743\u9875&#xff08;client_id&#xff09;\u7528\u6237\u6388\u6743\u56de\u8c03\u643a\u5e26 codePOST \/login\/oauth\/access_token&#xff08;code \u6362 token&#xff09;access_tokenGET \/user&#xff08;Bearer token&#xff09;\u7528\u6237\u4fe1\u606fupsert User&#xff08;githubId \u552f\u4e00&#xff09;user \u8bb0\u5f55\u7b7e\u53d1 JWT \u5e76\u5199\u5165 httpOnly Cookie\u91cd\u5b9a\u5411\u9996\u9875&#xff08;\u5df2\u767b\u5f55&#xff09;<\/p>\n<h4>3.4 &#x1f4da; \u4e13\u680f\u5ba1\u6838\u72b6\u6001\u673a&#xff08;V2.5 \u65b0\u589e&#xff09;<\/h4>\n<p>\u72b6\u6001\u6d41\u8f6c\u56fe<\/p>\n<p>             \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n  \u521b\u5efa \u2500\u2500\u2500\u2500\u25ba \u2502  DRAFT (\u8349\u7a3f)    \u2502<br \/>\n             \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<br \/>\n                      \u2502 \u7528\u6237\u70b9&#034;\u7533\u8bf7\u53d1\u5e03&#034;<br \/>\n                      \u25bc<br \/>\n             \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n             \u2502 PENDING (\u5f85\u5ba1\u6838)  \u2502<br \/>\n             \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<br \/>\n                \u250c\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n          \u901a\u8fc7  \u2502            \u2502 \u62d2\u7edd<br \/>\n                \u25bc            \u25bc<br \/>\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n        \u2502 PUBLISHED    \u2502  \u2502  DRAFT   \u2502<br \/>\n        \u2502  (\u5df2\u53d1\u5e03)     \u2502  \u2502 (\u9000\u56de)    \u2502<br \/>\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<br \/>\n               \u2502 \u7ba1\u7406\u5458\u4e0b\u67b6<br \/>\n               \u25bc<br \/>\n        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n        \u2502 PUBLISHED \u2192  \u2502<br \/>\n        \u2502  DRAFT       \u2502<br \/>\n        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n<p>\u7528 Mermaid \u72b6\u6001\u56fe\u8868\u8fbe\u66f4\u76f4\u89c2&#xff1a;<\/p>\n<p>#mermaid-svg-ZXuE6wSYxjayntpK{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-ZXuE6wSYxjayntpK .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-ZXuE6wSYxjayntpK .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-ZXuE6wSYxjayntpK .error-icon{fill:#552222;}#mermaid-svg-ZXuE6wSYxjayntpK .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ZXuE6wSYxjayntpK .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-ZXuE6wSYxjayntpK .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ZXuE6wSYxjayntpK .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ZXuE6wSYxjayntpK .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-ZXuE6wSYxjayntpK .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ZXuE6wSYxjayntpK .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ZXuE6wSYxjayntpK .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ZXuE6wSYxjayntpK .marker.cross{stroke:#333333;}#mermaid-svg-ZXuE6wSYxjayntpK svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ZXuE6wSYxjayntpK p{margin:0;}#mermaid-svg-ZXuE6wSYxjayntpK defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-ZXuE6wSYxjayntpK g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-ZXuE6wSYxjayntpK g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-ZXuE6wSYxjayntpK g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-ZXuE6wSYxjayntpK g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-ZXuE6wSYxjayntpK g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-ZXuE6wSYxjayntpK .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-ZXuE6wSYxjayntpK .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-ZXuE6wSYxjayntpK .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-ZXuE6wSYxjayntpK .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ZXuE6wSYxjayntpK .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-ZXuE6wSYxjayntpK .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-ZXuE6wSYxjayntpK .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-ZXuE6wSYxjayntpK .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-ZXuE6wSYxjayntpK .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-ZXuE6wSYxjayntpK .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-ZXuE6wSYxjayntpK .edgeLabel .label text{fill:#333;}#mermaid-svg-ZXuE6wSYxjayntpK .label div .edgeLabel{color:#333;}#mermaid-svg-ZXuE6wSYxjayntpK .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-ZXuE6wSYxjayntpK .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-ZXuE6wSYxjayntpK .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-ZXuE6wSYxjayntpK .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-ZXuE6wSYxjayntpK .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-ZXuE6wSYxjayntpK .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZXuE6wSYxjayntpK .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZXuE6wSYxjayntpK #statediagram-barbEnd{fill:#333333;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZXuE6wSYxjayntpK .cluster-label,#mermaid-svg-ZXuE6wSYxjayntpK .nodeLabel{color:#131300;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-ZXuE6wSYxjayntpK .note-edge{stroke-dasharray:5;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-note text{fill:black;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram-note .nodeLabel{color:black;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagram .edgeLabel{color:red;}#mermaid-svg-ZXuE6wSYxjayntpK #dependencyStart,#mermaid-svg-ZXuE6wSYxjayntpK #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-ZXuE6wSYxjayntpK .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-ZXuE6wSYxjayntpK :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<span class=\"edgeLabel\"><\/p>\n<p>\u521b\u5efa\u4e13\u680f<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/p>\n<p>\u7528\u6237\u7533\u8bf7\u53d1\u5e03<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/p>\n<p>\u7ba1\u7406\u5458\u901a\u8fc7<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/p>\n<p>\u7ba1\u7406\u5458\u62d2\u7edd&#xff08;\u9000\u56de&#xff09;<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/p>\n<p>\u7ba1\u7406\u5458\u4e0b\u67b6<\/p>\n<p><\/span><span class=\"edgeLabel\"><\/span><span class=\"nodeLabel\"><\/p>\n<p>DRAFT<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>PENDING<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>PUBLISHED<\/p>\n<p><\/span><\/p>\n<p>\u6570\u636e\u6a21\u578b<\/p>\n<p>enum ColumnStatus {<br \/>\n  DRAFT<br \/>\n  PENDING<br \/>\n  PUBLISHED<br \/>\n}<\/p>\n<p>model Column {<br \/>\n  id        String       &#064;id &#064;default(cuid())<br \/>\n  slug      String       &#064;unique<br \/>\n  title     String<br \/>\n  intro     String?<br \/>\n  status    ColumnStatus &#064;default(DRAFT)<br \/>\n  authorId  String<br \/>\n  author    User         &#064;relation(fields: [authorId], references: [id], onDelete: Cascade)<br \/>\n  posts     Post[]<br \/>\n  createdAt DateTime     &#064;default(now())<br \/>\n  updatedAt DateTime     &#064;updatedAt<\/p>\n<p>  &#064;&#064;index([status, createdAt])<br \/>\n  &#064;&#064;index([authorId])<br \/>\n}<\/p>\n<p>\u5173\u952e\u67e5\u8be2&#xff1a;\u6309\u72b6\u6001\u8fc7\u6ee4<\/p>\n<p><span class=\"token comment\">\/\/ \u524d\u53f0\u4e13\u680f\u5217\u8868&#xff1a;\u53ea\u5c55\u793a\u5df2\u53d1\u5e03<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">getPublicColumns<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">return<\/span> prisma<span class=\"token punctuation\">.<\/span>column<span class=\"token punctuation\">.<\/span><span class=\"token function\">findMany<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> status<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;PUBLISHED&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    orderBy<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> createdAt<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;desc&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    select<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> id<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> slug<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> title<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> intro<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u4e2a\u4eba\u4e3b\u9875&#xff1a;\u663e\u793a\u81ea\u5df1\u7684\u5168\u90e8\u72b6\u6001<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">getMyColumns<\/span><span class=\"token punctuation\">(<\/span>userId<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">return<\/span> prisma<span class=\"token punctuation\">.<\/span>column<span class=\"token punctuation\">.<\/span><span class=\"token function\">findMany<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> authorId<span class=\"token operator\">:<\/span> userId <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    orderBy<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> updatedAt<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;desc&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    select<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> id<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> slug<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> title<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> status<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u7ba1\u7406\u5458\u5ba1\u6838\u961f\u5217<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">getPendingColumns<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">return<\/span> prisma<span class=\"token punctuation\">.<\/span>column<span class=\"token punctuation\">.<\/span><span class=\"token function\">findMany<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> status<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;PENDING&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    orderBy<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> updatedAt<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;asc&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token comment\">\/\/ \u5148\u8fdb\u5148\u5ba1<\/span><br \/>\n    include<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> author<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> select<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> name<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> avatar<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>&#x1f4a1; \u8bbe\u8ba1\u8981\u70b9&#xff1a;\u72b6\u6001\u5b57\u6bb5 &#061; \u6570\u636e\u8fc7\u6ee4\u7ef4\u5ea6\u3002\u524d\u53f0 \/columns \u53ea\u67e5 PUBLISHED&#xff1b;\u4e2a\u4eba\u4e3b\u9875\u67e5\u5168\u90e8&#xff1b;\u7ba1\u7406\u540e\u53f0\u67e5 PENDING\u3002\u8fd9\u662f\u6700\u7b80\u5355\u4e5f\u6700\u53ef\u9760\u7684\u5185\u5bb9\u6cbb\u7406\u6a21\u5f0f\u3002<\/p>\n<h4>3.5 &#x1f4ac; \u52a8\u6001\u677f\u5757&#xff08;\u76f8\u518c &#043; \u8bf4\u8bf4\u5408\u5e76&#xff09;<\/h4>\n<ul>\n<li>\u7eaf\u6587\u5b57 \/ \u591a\u56fe \/ \u89c6\u9891\u6df7\u53d1<\/li>\n<li>\u9875\u9762\u4e24\u4e2a Tab&#xff1a;\u76f8\u518c\u3001\u8bf4\u8bf4<\/li>\n<li>\u5bfc\u822a\u680f\u4ece\u539f\u300c\u76f8\u518c\u300d\u300c\u52a8\u6001\u300d\u4e24\u4e2a\u5165\u53e3\u5408\u5e76\u4e3a\u4e00\u4e2a<\/li>\n<\/ul>\n<p>\u4fe1\u606f\u67b6\u6784\u7684\u51cf\u6cd5\u5f80\u5f80\u6bd4\u52a0\u6cd5\u66f4\u96be\u505a&#xff0c;\u4f46\u505a\u5bf9\u4e86\u7528\u6237\u4f53\u9a8c\u4f1a\u660e\u663e\u63d0\u5347\u3002<\/p>\n<hr \/>\n<h3>\u56db\u3001\u672c\u5730\u5f00\u53d1\u73af\u5883\u642d\u5efa<\/h3>\n<h4>4.1 \u73af\u5883\u8981\u6c42<\/h4>\n<table>\n<tr>\u4f9d\u8d56\u7248\u672c\u8981\u6c42\u8bf4\u660e<\/tr>\n<tbody>\n<tr>\n<td>Node.js<\/td>\n<td>20 LTS&#043;<\/td>\n<td>Next.js 16 \u6700\u4f4e\u8981\u6c42<\/td>\n<\/tr>\n<tr>\n<td>PostgreSQL<\/td>\n<td>14&#043;&#xff08;\u63a8\u8350 16&#xff09;<\/td>\n<td>\u652f\u6301 tsvector \u751f\u6210\u5217<\/td>\n<\/tr>\n<tr>\n<td>Git<\/td>\n<td>\u4efb\u610f<\/td>\n<td>\u62c9\u6e90\u7801<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>4.2 \u7528 Docker \u5feb\u901f\u8d77\u6570\u636e\u5e93&#xff08;\u63a8\u8350&#xff09;<\/h4>\n<p><span class=\"token function\">docker<\/span> run <span class=\"token parameter variable\">-d<\/span> <span class=\"token punctuation\">\\\\<\/span><br \/>\n  <span class=\"token parameter variable\">&#8211;name<\/span> blog-pg <span class=\"token punctuation\">\\\\<\/span><br \/>\n  <span class=\"token parameter variable\">-e<\/span> <span class=\"token assign-left variable\">POSTGRES_USER<\/span><span class=\"token operator\">&#061;<\/span>blog <span class=\"token punctuation\">\\\\<\/span><br \/>\n  <span class=\"token parameter variable\">-e<\/span> <span class=\"token assign-left variable\">POSTGRES_PASSWORD<\/span><span class=\"token operator\">&#061;<\/span>blog123 <span class=\"token punctuation\">\\\\<\/span><br \/>\n  <span class=\"token parameter variable\">-e<\/span> <span class=\"token assign-left variable\">POSTGRES_DB<\/span><span class=\"token operator\">&#061;<\/span>blog_v2 <span class=\"token punctuation\">\\\\<\/span><br \/>\n  <span class=\"token parameter variable\">-p<\/span> <span class=\"token number\">5432<\/span>:5432 <span class=\"token punctuation\">\\\\<\/span><br \/>\n  <span class=\"token parameter variable\">-v<\/span> blog-pg-data:\/var\/lib\/postgresql\/data <span class=\"token punctuation\">\\\\<\/span><br \/>\n  postgres:16<\/p>\n<p>&#x1f4a1; \u52a0\u4e86 -v blog-pg-data:\/var\/lib\/postgresql\/data&#xff0c;\u6570\u636e\u6301\u4e45\u5316\u5230\u5377&#xff0c;\u91cd\u542f\u5bb9\u5668\u4e0d\u4e22\u6570\u636e\u3002<\/p>\n<h4>4.3 \u514b\u9686\u4e0e\u5b89\u88c5<\/h4>\n<p><span class=\"token function\">git<\/span> clone https:\/\/github.com\/Wasd2490\/Full_stack-_blog-_version2.git<br \/>\n<span class=\"token builtin class-name\">cd<\/span> Full_stack-_blog-_version2<br \/>\n<span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span><\/p>\n<h4>4.4 \u73af\u5883\u53d8\u91cf\u914d\u7f6e<\/h4>\n<p>\u521b\u5efa .env&#xff1a;<\/p>\n<p># &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u6570\u636e\u5e93 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<br \/>\nDATABASE_URL&#061;&#034;postgresql:\/\/blog:blog123&#064;localhost:5432\/blog_v2?schema&#061;public&#034;<\/p>\n<p># &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; GitHub OAuth &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<br \/>\n# \u521b\u5efa\u8def\u5f84&#xff1a;GitHub \u2192 Settings \u2192 Developer settings \u2192 OAuth Apps \u2192 New<br \/>\n# \u672c\u5730 callback URL: http:\/\/localhost:3000\/api\/auth\/callback\/github<br \/>\nGITHUB_CLIENT_ID&#061;&#034;\u4f60\u7684 Client ID&#034;<br \/>\nGITHUB_CLIENT_SECRET&#061;&#034;\u4f60\u7684 Client Secret&#034;<\/p>\n<p># &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u4f1a\u8bdd\u5bc6\u94a5 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<br \/>\n# \u751f\u6210\u547d\u4ee4&#xff1a;openssl rand -base64 32<br \/>\nSESSION_SECRET&#061;&#034;\u7c98\u8d34\u751f\u6210\u7684\u968f\u673a\u4e32&#034;<\/p>\n<p># &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u7ad9\u70b9\u4fe1\u606f &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<br \/>\nSITE_NAME&#061;&#034;\u6211\u7684\u535a\u5ba2&#034;<br \/>\nNEXT_PUBLIC_SITE_URL&#061;&#034;http:\/\/localhost:3000&#034;<\/p>\n<p>&#x1f511; \u751f\u6210 SESSION_SECRET \u7684\u547d\u4ee4&#xff1a;<\/p>\n<p>openssl rand <span class=\"token parameter variable\">-base64<\/span> <span class=\"token number\">32<\/span><\/p>\n<p>\u957f\u5ea6\u4e0d\u8db3\u4f1a\u964d\u4f4e JWT \u7b7e\u540d\u5f3a\u5ea6\u3002\u751f\u4ea7\u73af\u5883\u5fc5\u987b\u4e0e\u672c\u5730\u4e0d\u540c\u3002<\/p>\n<h4>4.5 \u521d\u59cb\u5316\u6570\u636e\u5e93\u4e0e\u542f\u52a8<\/h4>\n<p><span class=\"token comment\"># 1. \u540c\u6b65\u8868\u7ed3\u6784<\/span><br \/>\nnpx prisma db push<\/p>\n<p><span class=\"token comment\"># 2. \u751f\u6210 Prisma Client&#xff08;\u7c7b\u578b&#xff09;<\/span><br \/>\nnpx prisma generate<\/p>\n<p><span class=\"token comment\"># 3. \u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668<\/span><br \/>\n<span class=\"token function\">npm<\/span> run dev<\/p>\n<p>\u8bbf\u95ee http:\/\/localhost:3000\u3002\u5f00\u53d1\u6a21\u5f0f\u4e0b Prisma \u67e5\u8be2\u65e5\u5fd7\u76f4\u63a5\u6253\u5370\u5230\u7ec8\u7aef\u3002<\/p>\n<p>\u26a0\ufe0f Windows \u7528\u6237&#xff1a;npm run build \u4f1a\u5361\u6b7b&#xff0c;\u6539\u7528&#xff1a;<\/p>\n<p>npx next build <span class=\"token parameter variable\">&#8211;webpack<\/span><\/p>\n<h4>4.6 \u63a8\u8350\u5f00\u542f Prisma Studio&#xff08;\u53ef\u89c6\u5316 DB&#xff09;<\/h4>\n<p>npx prisma studio<\/p>\n<p>\u6d4f\u89c8\u5668\u6253\u5f00 http:\/\/localhost:5555&#xff0c;\u53ef\u4ee5\u53ef\u89c6\u5316\u67e5\u770b\/\u7f16\u8f91\u6240\u6709\u8868\u6570\u636e&#xff0c;\u8c03\u8bd5 OAuth \u548c\u5ba1\u6838\u6d41\u7a0b\u65f6\u975e\u5e38\u65b9\u4fbf\u3002<\/p>\n<hr \/>\n<h3>\u4e94\u3001\u90e8\u7f72\u5230\u817e\u8baf\u4e91&#xff08;Ubuntu &#043; PM2 &#043; Nginx&#xff09;<\/h3>\n<p>\u76ee\u6807\u73af\u5883&#xff1a;\u817e\u8baf\u4e91\u8f7b\u91cf\u5e94\u7528\u670d\u52a1\u5668&#xff0c;Ubuntu 22.04 LTS&#xff0c;2\u6838 2G\u3002<\/p>\n<h4>5.1 \u5b89\u88c5\u7cfb\u7edf\u4f9d\u8d56<\/h4>\n<p><span class=\"token comment\"># 1. Node.js 20<\/span><br \/>\n<span class=\"token function\">curl<\/span> <span class=\"token parameter variable\">-fsSL<\/span> https:\/\/deb.nodesource.com\/setup_20.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<br \/>\n<span class=\"token function\">node<\/span> <span class=\"token parameter variable\">-v<\/span>   <span class=\"token comment\"># \u5e94\u8f93\u51fa v20.x<\/span><\/p>\n<p><span class=\"token comment\"># 2. PostgreSQL 16<\/span><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> postgresql postgresql-contrib<br \/>\n<span class=\"token function\">sudo<\/span> systemctl status postgresql   <span class=\"token comment\"># \u786e\u8ba4 running<\/span><\/p>\n<p><span class=\"token comment\"># 3. PM2<\/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<\/p>\n<p><span class=\"token comment\"># 4. Nginx<\/span><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> nginx<\/p>\n<h4>5.2 \u521b\u5efa\u6570\u636e\u5e93\u4e0e\u7528\u6237<\/h4>\n<p><span class=\"token function\">sudo<\/span> <span class=\"token parameter variable\">-u<\/span> postgres psql<\/p>\n<p>psql \u4e2d\u6267\u884c&#xff1a;<\/p>\n<p><span class=\"token keyword\">CREATE<\/span> <span class=\"token keyword\">USER<\/span> blog <span class=\"token keyword\">WITH<\/span> PASSWORD <span class=\"token string\">&#039;\u5f3a\u5bc6\u7801&#xff08;\u751f\u4ea7\u4e13\u7528&#xff09;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">CREATE<\/span> <span class=\"token keyword\">DATABASE<\/span> blog_v2 OWNER blog<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">GRANT<\/span> <span class=\"token keyword\">ALL<\/span> <span class=\"token keyword\">PRIVILEGES<\/span> <span class=\"token keyword\">ON<\/span> <span class=\"token keyword\">DATABASE<\/span> blog_v2 <span class=\"token keyword\">TO<\/span> blog<span class=\"token punctuation\">;<\/span><br \/>\n\\\\q<\/p>\n<p>&#x1f510; \u5b89\u5168\u539f\u5219&#xff1a;\u6c38\u8fdc\u4e0d\u8981\u7528 postgres \u8d85\u7ea7\u7528\u6237\u76f4\u63a5\u8dd1\u5e94\u7528\u3002\u72ec\u7acb\u7528\u6237\u6743\u9650\u6700\u5c0f\u5316&#xff0c;\u662f\u751f\u4ea7\u73af\u5883\u57fa\u7ebf\u3002<\/p>\n<h4>5.3 \u4e0a\u4f20\u4ee3\u7801\u5e76\u5b89\u88c5\u4f9d\u8d56<\/h4>\n<p>\u65b9\u5f0f A&#xff1a;\u4e0a\u4f20 zip \u540e\u89e3\u538b<\/p>\n<p><span class=\"token function\">unzip<\/span> my_blog_V2.5_src.zip <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token builtin class-name\">cd<\/span> my_blog_V2.5_src2.0.1_src_20261030<\/p>\n<p>\u65b9\u5f0f B&#xff1a;\u76f4\u63a5 git clone<\/p>\n<p><span class=\"token function\">git<\/span> clone https:\/\/github.com\/Wasd2490\/Full_stack-_blog-_version2.git<br \/>\n<span class=\"token builtin class-name\">cd<\/span> Full_stack-_blog-_version2<\/p>\n<p><span class=\"token comment\"># \u751f\u4ea7\u73af\u5883\u63a8\u8350 npm ci&#xff08;\u4e25\u683c\u6309 lock \u6587\u4ef6&#xff0c;\u66f4\u5feb&#xff09;<\/span><br \/>\n<span class=\"token function\">npm<\/span> ci <span class=\"token parameter variable\">&#8211;omit<\/span><span class=\"token operator\">&#061;<\/span>dev<\/p>\n<h4>5.4 \u914d\u7f6e\u751f\u4ea7\u73af\u5883\u53d8\u91cf<\/h4>\n<p>DATABASE_URL&#061;&#034;postgresql:\/\/blog:\u5f3a\u5bc6\u7801&#064;localhost:5432\/blog_v2?schema&#061;public&#034;<br \/>\nGITHUB_CLIENT_ID&#061;&#034;\u4f60\u7684 GitHub Client ID&#034;<br \/>\nGITHUB_CLIENT_SECRET&#061;&#034;\u4f60\u7684 GitHub Client Secret&#034;<br \/>\nSESSION_SECRET&#061;&#034;\u751f\u4ea7\u73af\u5883\u4e13\u7528\u968f\u673a\u4e32&#xff08;\u4e0e\u672c\u5730\u4e0d\u540c&#xff09;&#034;<br \/>\nSITE_NAME&#061;&#034;\u6211\u7684\u535a\u5ba2&#034;<br \/>\nNEXT_PUBLIC_SITE_URL&#061;&#034;https:\/\/\u4f60\u7684\u57df\u540d&#034;<\/p>\n<p>\u26a0\ufe0f NEXT_PUBLIC_SITE_URL \u4f1a\u5728\u6784\u5efa\u65f6\u88ab\u6ce8\u5165\u5230\u5ba2\u6237\u7aef bundle&#xff0c;\u4fee\u6539\u540e\u5fc5\u987b\u91cd\u65b0 build\u3002<\/p>\n<h4>5.5 \u521d\u59cb\u5316\u6570\u636e\u5e93\u5e76\u6784\u5efa<\/h4>\n<p>npx prisma db push<br \/>\nnpx prisma generate<br \/>\n<span class=\"token function\">npm<\/span> run build<\/p>\n<p>\u9996\u6b21\u90e8\u7f72\u9a8c\u8bc1&#xff1a;\u6784\u5efa\u4ea7\u7269\u5e94\u751f\u6210 .next\/ \u76ee\u5f55&#xff1a;<\/p>\n<p><span class=\"token function\">ls<\/span> <span class=\"token parameter variable\">-la<\/span> .next\/   <span class=\"token comment\"># \u5e94\u542b BUILD_ID\u3001server\/\u3001static\/<\/span><\/p>\n<h4>5.6 PM2 \u542f\u52a8\u4e0e\u5f00\u673a\u81ea\u542f<\/h4>\n<p><span class=\"token comment\"># \u542f\u52a8<\/span><br \/>\npm2 start <span class=\"token function\">npm<\/span> <span class=\"token parameter variable\">&#8211;name<\/span> <span class=\"token string\">&#034;blog&#034;<\/span> &#8212; start<\/p>\n<p><span class=\"token comment\"># \u4fdd\u5b58\u8fdb\u7a0b\u5217\u8868<\/span><br \/>\npm2 save<\/p>\n<p><span class=\"token comment\"># \u751f\u6210\u5f00\u673a\u811a\u672c&#xff08;\u4f1a\u8f93\u51fa\u4e00\u6761\u9700\u8981 sudo \u6267\u884c\u7684\u547d\u4ee4&#xff09;<\/span><br \/>\npm2 startup<\/p>\n<p>PM2 \u5e38\u7528\u8fd0\u7ef4\u547d\u4ee4&#xff1a;<\/p>\n<p>pm2 status           <span class=\"token comment\"># \u67e5\u770b\u72b6\u6001&#xff08;online \/ errored&#xff09;<\/span><br \/>\npm2 logs blog        <span class=\"token comment\"># \u5b9e\u65f6\u65e5\u5fd7&#xff08;\u6392\u969c\u7b2c\u4e00\u5165\u53e3&#xff09;<\/span><br \/>\npm2 logs blog <span class=\"token parameter variable\">&#8211;lines<\/span> <span class=\"token number\">200<\/span>   <span class=\"token comment\"># \u67e5\u770b\u6700\u8fd1 200 \u884c<\/span><br \/>\npm2 restart blog     <span class=\"token comment\"># \u91cd\u542f<\/span><br \/>\npm2 reload blog      <span class=\"token comment\"># \u96f6\u505c\u673a\u91cd\u8f7d<\/span><br \/>\npm2 stop blog        <span class=\"token comment\"># \u505c\u6b62<\/span><br \/>\npm2 delete blog      <span class=\"token comment\"># \u79fb\u9664<\/span><\/p>\n<p>&#x1f4a1; \u8fdb\u9636&#xff1a;\u53ef\u4ee5\u5199 ecosystem.config.js \u7ba1\u7406\u591a\u73af\u5883&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ ecosystem.config.js<\/span><br \/>\nmodule<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token literal-property property\">apps<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token literal-property property\">name<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;blog&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">script<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;npm&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">args<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;start&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">cwd<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;\/var\/www\/blog&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">instances<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span>          <span class=\"token comment\">\/\/ \u5355\u6838\u670d\u52a1\u5668\u4fdd\u6301 1&#xff1b;\u591a\u6838\u53ef\u6539 &#039;max&#039; \u8d70 cluster \u6a21\u5f0f<\/span><br \/>\n    <span class=\"token literal-property property\">exec_mode<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;fork&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">max_memory_restart<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;500M&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">env<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token constant\">NODE_ENV<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;production&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token constant\">PORT<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">3000<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u542f\u52a8&#xff1a;pm2 start ecosystem.config.js<\/p>\n<h4>5.7 Nginx \u53cd\u5411\u4ee3\u7406<\/h4>\n<p><span class=\"token function\">sudo<\/span> <span class=\"token function\">nano<\/span> \/etc\/nginx\/sites-available\/blog<\/p>\n<p>\u914d\u7f6e\u5185\u5bb9&#xff1a;<\/p>\n<p>server {<br \/>\n    listen 80;<br \/>\n    server_name \u4f60\u7684\u57df\u540d\u6216IP;<\/p>\n<p>    # \u89c6\u9891 \/ \u591a\u56fe\u4e0a\u4f20\u652f\u6301<br \/>\n    client_max_body_size 50M;<\/p>\n<p>    # gzip \u538b\u7f29&#xff08;Next.js \u5df2\u5185\u7f6e\u538b\u7f29&#xff0c;\u6b64\u5904\u53cc\u4fdd\u9669&#xff09;<br \/>\n    gzip on;<br \/>\n    gzip_types text\/plain text\/css application\/json application\/javascript application\/xml&#043;rss;<\/p>\n<p>    location \/ {<br \/>\n        proxy_pass http:\/\/127.0.0.1:3000;<br \/>\n        proxy_http_version 1.1;<br \/>\n        proxy_set_header Upgrade $http_upgrade;<br \/>\n        proxy_set_header Connection &#039;upgrade&#039;;<br \/>\n        proxy_set_header Host $host;<br \/>\n        proxy_set_header X-Real-IP $remote_addr;<br \/>\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;<br \/>\n        proxy_set_header X-Forwarded-Proto $scheme;<\/p>\n<p>        # \u8d85\u65f6\u8bbe\u7f6e&#xff08;\u957f\u8bf7\u6c42\u5982 OAuth \u5904\u7406&#xff09;<br \/>\n        proxy_connect_timeout 60s;<br \/>\n        proxy_send_timeout    60s;<br \/>\n        proxy_read_timeout    60s;<br \/>\n    }<\/p>\n<p>    # Next.js \u9759\u6001\u8d44\u6e90\u5f3a\u7f13\u5b58<br \/>\n    location \/_next\/static\/ {<br \/>\n        proxy_pass http:\/\/127.0.0.1:3000;<br \/>\n        add_header Cache-Control &#034;public, max-age&#061;31536000, immutable&#034;;<br \/>\n    }<br \/>\n}<\/p>\n<p>\u542f\u7528\u914d\u7f6e&#xff1a;<\/p>\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\/blog \/etc\/nginx\/sites-enabled\/<br \/>\n<span class=\"token function\">sudo<\/span> nginx <span class=\"token parameter variable\">-t<\/span>                       <span class=\"token comment\"># \u8bed\u6cd5\u68c0\u67e5&#xff0c;\u5fc5\u987b\u901a\u8fc7\u518d\u91cd\u542f<\/span><br \/>\n<span class=\"token function\">sudo<\/span> systemctl reload nginx<\/p>\n<p>&#x1f4a1; Upgrade \/ Connection \u5934\u7684\u4f5c\u7528&#xff1a;HMR&#xff08;\u5f00\u53d1&#xff09;\u548c\u90e8\u5206 WebSocket \u573a\u666f\u9700\u8981&#xff1b;\u751f\u4ea7\u73af\u5883\u4fdd\u7559\u65e0\u526f\u4f5c\u7528\u3002\/_next\/static\/ \u7684\u5f3a\u7f13\u5b58\u8ba9\u9759\u6001\u8d44\u6e90\u4e00\u5e74\u4e0d\u7528\u56de\u6e90\u3002<\/p>\n<h4>5.8 \u4fee\u6539 GitHub OAuth \u56de\u8c03\u5730\u5740<\/h4>\n<p>GitHub OAuth App \u8bbe\u7f6e \u2192 Authorization callback URL&#xff1a;<\/p>\n<p>https:\/\/\u4f60\u7684\u57df\u540d\/api\/auth\/callback\/github<\/p>\n<p>\u26a0\ufe0f \u534f\u8bae\u3001\u57df\u540d\u3001\u8def\u5f84\u5fc5\u987b\u5b8c\u5168\u5339\u914d&#xff0c;\u5c11\u4e00\u4e2a \/ \u6216 http\/https \u4e0d\u5bf9\u90fd\u4f1a\u62d2\u7edd\u6388\u6743\u3002\u8fd9\u662f\u90e8\u7f72\u9636\u6bb5\u6700\u9ad8\u9891\u7684\u5361\u70b9\u3002<\/p>\n<h4>5.9 \u914d\u7f6e HTTPS&#xff08;\u5f3a\u70c8\u63a8\u8350&#xff09;<\/h4>\n<p><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> certbot python3-certbot-nginx<br \/>\n<span class=\"token function\">sudo<\/span> certbot <span class=\"token parameter variable\">&#8211;nginx<\/span> <span class=\"token parameter variable\">-d<\/span> \u4f60\u7684\u57df\u540d<\/p>\n<p>Certbot \u4f1a\u81ea\u52a8\u4fee\u6539 Nginx \u914d\u7f6e\u5e76\u6ce8\u518c\u7eed\u671f\u5b9a\u65f6\u4efb\u52a1&#xff0c;\u53ef\u901a\u8fc7 systemctl status certbot.timer \u786e\u8ba4\u5b9a\u65f6\u7eed\u671f\u670d\u52a1\u5904\u4e8e Active \u72b6\u6001\u3002<\/p>\n<h4>5.10 \u90e8\u7f72\u9a8c\u8bc1\u6e05\u5355<\/h4>\n<table>\n<tr>#\u68c0\u67e5\u9879\u9a8c\u8bc1\u65b9\u6cd5\u9884\u671f\u7ed3\u679c<\/tr>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>\u9996\u9875\u53ef\u8bbf\u95ee<\/td>\n<td>curl -I http:\/\/\u670d\u52a1\u5668IP<\/td>\n<td>HTTP 200<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>\u6570\u636e\u5e93\u8fde\u901a<\/td>\n<td>\u9996\u9875\u6587\u7ae0\u5217\u8868\u80fd\u52a0\u8f7d<\/td>\n<td>\u6709\u6570\u636e\u5c55\u793a<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>GitHub \u767b\u5f55<\/td>\n<td>\u70b9\u51fb\u767b\u5f55 \u2192 \u6388\u6743 \u2192 \u56de\u7ad9<\/td>\n<td>\u663e\u793a\u5934\u50cf&#xff0c;\/api\/me \u8fd4\u56de\u7528\u6237<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>\u53d1\u5e03\u6587\u7ae0<\/td>\n<td>\u540e\u53f0\u53d1\u4e00\u7bc7 \u2192 \u524d\u53f0\u8bbf\u95ee<\/td>\n<td>\u8be6\u60c5\u9875\u6b63\u5e38\u6e32\u67d3<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>\u4e0a\u4f20\u5934\u50cf<\/td>\n<td>\u4e0a\u4f20 \u2192 \u5237\u65b0<\/td>\n<td>\u5934\u50cf URL \u53ef\u8bbf\u95ee<\/td>\n<\/tr>\n<tr>\n<td>6<\/td>\n<td>\u4e13\u680f\u5ba1\u6838<\/td>\n<td>\u5efa\u8349\u7a3f \u2192 \u7533\u8bf7 \u2192 \u540e\u53f0\u901a\u8fc7 \u2192 \u524d\u53f0\u53ef\u89c1<\/td>\n<td>\u72b6\u6001\u6b63\u786e\u6d41\u8f6c<\/td>\n<\/tr>\n<tr>\n<td>7<\/td>\n<td>\u65e5\u5fd7\u65e0\u5f02\u5e38<\/td>\n<td>pm2 logs blog<\/td>\n<td>\u65e0 error \u65e5\u5fd7<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>PM2 \u5b88\u62a4<\/td>\n<td>sudo reboot \u540e\u91cd\u8fde<\/td>\n<td>\u670d\u52a1\u81ea\u52a8\u6062\u590d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>\u516d\u3001\u6027\u80fd\u4f18\u5316\u5b9e\u8df5<\/h3>\n<p>\u6309\u4f18\u5148\u7ea7\u6392\u5217&#xff0c;\u8fd9\u4e9b\u70b9\u662f\u4ece\u300c\u80fd\u8dd1\u300d\u8fdb\u5316\u5230\u300c\u8dd1\u5f97\u597d\u300d\u7684\u5173\u952e\u3002<\/p>\n<h4>6.1 \u6e32\u67d3\u7b56\u7565\u9009\u578b&#xff08;App Router \u7cbe\u534e&#xff09;<\/h4>\n<p>\u4e0d\u540c\u9875\u9762\u7528\u4e0d\u540c\u7b56\u7565&#xff0c;\u662f Next.js \u7684\u6700\u5927\u4f18\u52bf&#xff1a;<\/p>\n<table>\n<tr>\u9875\u9762\u7b56\u7565\u5b9e\u73b0\u7406\u7531<\/tr>\n<tbody>\n<tr>\n<td>\u9996\u9875\u6587\u7ae0\u5217\u8868<\/td>\n<td>ISR<\/td>\n<td>export const revalidate &#061; 60<\/td>\n<td>\u5185\u5bb9\u53d8\u5316\u4e0d\u9891\u7e41&#xff0c;60s \u4e00\u6b21\u91cd\u5efa<\/td>\n<\/tr>\n<tr>\n<td>\u6587\u7ae0\u8be6\u60c5\u9875<\/td>\n<td>SSG<\/td>\n<td>generateStaticParams<\/td>\n<td>\u5df2\u53d1\u5e03\u6587\u7ae0\u8d8b\u4e8e\u7a33\u5b9a<\/td>\n<\/tr>\n<tr>\n<td>\u4e2a\u4eba\u4e3b\u9875<\/td>\n<td>SSR<\/td>\n<td>export const dynamic &#061; &#039;force-dynamic&#039;<\/td>\n<td>\u9700\u8981\u5b9e\u65f6\u6570\u636e<\/td>\n<\/tr>\n<tr>\n<td>\u7ba1\u7406\u540e\u53f0<\/td>\n<td>CSR<\/td>\n<td>\u5ba2\u6237\u7aef\u7ec4\u4ef6 &#043; SWR<\/td>\n<td>\u65e0\u9700 SEO&#xff0c;\u4ea4\u4e92\u590d\u6742<\/td>\n<\/tr>\n<tr>\n<td>\u641c\u7d22\u9875<\/td>\n<td>SSR<\/td>\n<td>\u6309\u67e5\u8be2\u53c2\u6570\u52a8\u6001\u6e32\u67d3<\/td>\n<td>\u4f9d\u8d56\u67e5\u8be2\u53c2\u6570&#xff0c;\u65e0\u6cd5\u9884\u751f\u6210<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>#mermaid-svg-vh3B0l8LKbO0h8LU{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-vh3B0l8LKbO0h8LU .error-icon{fill:#552222;}#mermaid-svg-vh3B0l8LKbO0h8LU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vh3B0l8LKbO0h8LU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vh3B0l8LKbO0h8LU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vh3B0l8LKbO0h8LU .marker.cross{stroke:#333333;}#mermaid-svg-vh3B0l8LKbO0h8LU svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vh3B0l8LKbO0h8LU p{margin:0;}#mermaid-svg-vh3B0l8LKbO0h8LU .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-vh3B0l8LKbO0h8LU .cluster-label text{fill:#333;}#mermaid-svg-vh3B0l8LKbO0h8LU .cluster-label span{color:#333;}#mermaid-svg-vh3B0l8LKbO0h8LU .cluster-label span p{background-color:transparent;}#mermaid-svg-vh3B0l8LKbO0h8LU .label text,#mermaid-svg-vh3B0l8LKbO0h8LU span{fill:#333;color:#333;}#mermaid-svg-vh3B0l8LKbO0h8LU .node rect,#mermaid-svg-vh3B0l8LKbO0h8LU .node circle,#mermaid-svg-vh3B0l8LKbO0h8LU .node ellipse,#mermaid-svg-vh3B0l8LKbO0h8LU .node polygon,#mermaid-svg-vh3B0l8LKbO0h8LU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-vh3B0l8LKbO0h8LU .rough-node .label text,#mermaid-svg-vh3B0l8LKbO0h8LU .node .label text,#mermaid-svg-vh3B0l8LKbO0h8LU .image-shape .label,#mermaid-svg-vh3B0l8LKbO0h8LU .icon-shape .label{text-anchor:middle;}#mermaid-svg-vh3B0l8LKbO0h8LU .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-vh3B0l8LKbO0h8LU .rough-node .label,#mermaid-svg-vh3B0l8LKbO0h8LU .node .label,#mermaid-svg-vh3B0l8LKbO0h8LU .image-shape .label,#mermaid-svg-vh3B0l8LKbO0h8LU .icon-shape .label{text-align:center;}#mermaid-svg-vh3B0l8LKbO0h8LU .node.clickable{cursor:pointer;}#mermaid-svg-vh3B0l8LKbO0h8LU .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-vh3B0l8LKbO0h8LU .arrowheadPath{fill:#333333;}#mermaid-svg-vh3B0l8LKbO0h8LU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-vh3B0l8LKbO0h8LU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-vh3B0l8LKbO0h8LU .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-vh3B0l8LKbO0h8LU .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-vh3B0l8LKbO0h8LU .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-vh3B0l8LKbO0h8LU .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-vh3B0l8LKbO0h8LU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-vh3B0l8LKbO0h8LU .cluster text{fill:#333;}#mermaid-svg-vh3B0l8LKbO0h8LU .cluster span{color:#333;}#mermaid-svg-vh3B0l8LKbO0h8LU div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-vh3B0l8LKbO0h8LU .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-vh3B0l8LKbO0h8LU rect.text{fill:none;stroke-width:0;}#mermaid-svg-vh3B0l8LKbO0h8LU .icon-shape,#mermaid-svg-vh3B0l8LKbO0h8LU .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-vh3B0l8LKbO0h8LU .icon-shape p,#mermaid-svg-vh3B0l8LKbO0h8LU .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-vh3B0l8LKbO0h8LU .icon-shape .label rect,#mermaid-svg-vh3B0l8LKbO0h8LU .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-vh3B0l8LKbO0h8LU .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-vh3B0l8LKbO0h8LU .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-vh3B0l8LKbO0h8LU :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"edgeLabel\"><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u9875\u9762\u7c7b\u578b<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u9996\u9875\u6587\u7ae0\u5217\u8868<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u6587\u7ae0\u8be6\u60c5\u9875<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u4e2a\u4eba\u4e3b\u9875<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u7ba1\u7406\u540e\u53f0<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>\u641c\u7d22\u9875<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>ISR&#xff1a;revalidate &#061; 60<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>SSG&#xff1a;generateStaticParams<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>SSR&#xff1a;force-dynamic<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>CSR&#xff1a;\u5ba2\u6237\u7aef\u7ec4\u4ef6 &#043; SWR<\/p>\n<p><\/span><span class=\"nodeLabel\"><\/p>\n<p>SSR&#xff1a;\u6309\u67e5\u8be2\u53c2\u6570\u52a8\u6001\u6e32\u67d3<\/p>\n<p><\/span><\/p>\n<p>\u793a\u4f8b&#xff1a;\u6587\u7ae0\u8be6\u60c5\u9875 SSG<\/p>\n<p><span class=\"token comment\">\/\/ app\/post\/[slug]\/page.tsx<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> prisma <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/lib\/prisma&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> notFound <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;next\/navigation&#039;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u6784\u5efa\u65f6\u9884\u751f\u6210\u6240\u6709\u5df2\u53d1\u5e03\u6587\u7ae0<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">generateStaticParams<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> posts <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>post<span class=\"token punctuation\">.<\/span><span class=\"token function\">findMany<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> status<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;PUBLISHED&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    select<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> slug<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">return<\/span> posts<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>p<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> slug<span class=\"token operator\">:<\/span> p<span class=\"token punctuation\">.<\/span>slug <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u589e\u91cf\u751f\u6210&#xff1a;\u672a\u9884\u751f\u6210\u7684\u65b0\u6587\u7ae0\u9996\u6b21\u8bbf\u95ee\u65f6\u6309\u9700\u751f\u6210<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> dynamicParams <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><br \/>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> revalidate <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">3600<\/span> <span class=\"token comment\">\/\/ 1 \u5c0f\u65f6\u91cd\u5efa\u4e00\u6b21<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">PostPage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> params <span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> params<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> slug<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> post <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>post<span class=\"token punctuation\">.<\/span><span class=\"token function\">findUnique<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> slug<span class=\"token operator\">:<\/span> params<span class=\"token punctuation\">.<\/span>slug<span class=\"token punctuation\">,<\/span> status<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;PUBLISHED&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    include<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> author<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> column<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>post<span class=\"token punctuation\">)<\/span> <span class=\"token function\">notFound<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token operator\">&lt;<\/span>article<span class=\"token operator\">&gt;<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span>h1<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">{<\/span>post<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h1<span class=\"token operator\">&gt;<\/span><br \/>\n      <span class=\"token punctuation\">{<\/span><span class=\"token comment\">\/* \u5185\u5bb9\u6e32\u67d3&#8230; *\/<\/span><span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>article<span class=\"token operator\">&gt;<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>6.2 \u56fe\u7247\u4f18\u5316<\/h4>\n<p>\u7edf\u4e00\u7528 next\/image&#xff0c;\u81ea\u52a8 AVIF\/WebP \u8f6c\u6362 &#043; \u61d2\u52a0\u8f7d&#xff1a;<\/p>\n<p>import Image from &#039;next\/image&#039;<\/p>\n<p>&lt;Image<br \/>\n  src&#061;{post.cover}<br \/>\n  alt&#061;{post.title}<br \/>\n  width&#061;{800}<br \/>\n  height&#061;{450}<br \/>\n  sizes&#061;&#034;(max-width: 768px) 100vw, 800px&#034;<br \/>\n  priority&#061;{isAboveFold}       \/\/ \u9996\u5c4f\u56fe\u5f00\u542f&#xff0c;\u5176\u4ed6\u4ea4\u7ed9\u61d2\u52a0\u8f7d<br \/>\n  placeholder&#061;&#034;blur&#034;<br \/>\n  blurDataURL&#061;&#034;data:image\/svg&#043;xml;base64,&#8230;&#034;<br \/>\n\/&gt;<\/p>\n<h4>6.3 \u89c6\u9891\u80cc\u666f\u52a0\u8f7d\u7b56\u7565<\/h4>\n<p>&lt;video<br \/>\n  autoPlay muted loop playsInline<br \/>\n  preload&#061;{isFirstScreen ? &#039;auto&#039; : &#039;metadata&#039;}<br \/>\n  poster&#061;&#034;\/poster.jpg&#034;<br \/>\n  className&#061;&#034;fixed inset-0 -z-10 object-cover&#034;<br \/>\n&gt;<br \/>\n  &lt;source src&#061;&#034;\/bg.mp4&#034; type&#061;&#034;video\/mp4&#034; \/&gt;<br \/>\n&lt;\/video&gt;<\/p>\n<p>&#x1f4a1; \u79fb\u52a8\u7aef\u53ef\u4ee5\u7528 CSS media query \u76f4\u63a5\u964d\u7ea7\u4e3a\u9759\u6001\u5c01\u9762&#xff0c;\u8282\u7701\u6d41\u91cf\u3002<\/p>\n<h4>6.4 \u6570\u636e\u5e93\u67e5\u8be2\u4f18\u5316<\/h4>\n<p><span class=\"token comment\">\/\/ \u274c \u53cd\u4f8b&#xff1a;N&#043;1 \u67e5\u8be2<\/span><br \/>\n<span class=\"token keyword\">const<\/span> posts <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>post<span class=\"token punctuation\">.<\/span><span class=\"token function\">findMany<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> p <span class=\"token keyword\">of<\/span> posts<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  p<span class=\"token punctuation\">.<\/span>author <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>user<span class=\"token punctuation\">.<\/span><span class=\"token function\">findUnique<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> id<span class=\"token operator\">:<\/span> p<span class=\"token punctuation\">.<\/span>authorId <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u2705 \u6b63\u4f8b&#xff1a;include \u4e00\u6b21\u67e5\u5b8c<\/span><br \/>\n<span class=\"token keyword\">const<\/span> posts <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>post<span class=\"token punctuation\">.<\/span><span class=\"token function\">findMany<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n  include<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    author<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> select<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> name<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> avatar<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    column<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> select<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> title<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span> slug<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  orderBy<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> createdAt<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;desc&#039;<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  take<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<h4>6.5 Prisma \u8fde\u63a5\u6c60<\/h4>\n<p>\u5355\u673a\u90e8\u7f72\u901a\u5e38\u65e0\u9700\u8c03\u6574\u3002\u82e5\u540e\u7eed\u4e0a\u591a\u5b9e\u4f8b\/\u5bb9\u5668&#xff0c;\u5efa\u8bae\u914d\u5408 PgBouncer&#xff1a;<\/p>\n<p># \u76f4\u8fde&#xff1a;\u7528\u4e8e migrations<br \/>\nDATABASE_URL&#061;&#034;postgresql:\/\/blog:pwd&#064;localhost:5432\/blog_v2?schema&#061;public&#034;<br \/>\n# \u8fde\u63a5\u6c60&#xff1a;\u7528\u4e8e\u8fd0\u884c\u65f6<br \/>\nDATABASE_URL&#061;&#034;postgresql:\/\/blog:pwd&#064;localhost:6432\/blog_v2?pgbouncer&#061;true&amp;connection_limit&#061;1&#034;<\/p>\n<hr \/>\n<h3>\u4e03\u3001\u5b89\u5168\u52a0\u56fa\u5efa\u8bae<\/h3>\n<table>\n<tr>\u98ce\u9669\u70b9\u52a0\u56fa\u63aa\u65bd\u4f18\u5148\u7ea7<\/tr>\n<tbody>\n<tr>\n<td>JWT \u5bc6\u94a5\u6cc4\u9732<\/td>\n<td>SESSION_SECRET \u7528 openssl rand -base64 32&#xff0c;\u751f\u4ea7\u4e0e\u5f00\u53d1\u4e0d\u540c<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<tr>\n<td>Cookie \u88ab XSS \u7a83\u53d6<\/td>\n<td>httpOnly: true &#043; sameSite: \u2018lax\u2019 &#043; \u751f\u4ea7 secure: true<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<tr>\n<td>OAuth CSRF<\/td>\n<td>\u5b9e\u73b0 state \u53c2\u6570\u6821\u9a8c&#xff08;sessionStorage \u4fdd\u5b58 &#043; \u56de\u8c03\u6bd4\u5bf9&#xff09;<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<tr>\n<td>SQL \u6ce8\u5165<\/td>\n<td>\u5168\u90e8\u901a\u8fc7 Prisma \u67e5\u8be2&#xff0c;\u4e0d\u624b\u62fc SQL<\/td>\n<td>&#x1f7e2; P2<\/td>\n<\/tr>\n<tr>\n<td>\u8d8a\u6743\u4fee\u6539<\/td>\n<td>\u4fee\u6539\u6587\u7ae0\/\u4e13\u680f\u65f6\u6821\u9a8c authorId &#061;&#061;&#061; session.userId<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<tr>\n<td>\u4e0a\u4f20\u653b\u51fb<\/td>\n<td>\u6821\u9a8c MIME &#043; \u6269\u5c55\u540d &#043; \u5927\u5c0f\u9650\u5236&#xff08;Nginx \u5c42 &#043; \u5e94\u7528\u5c42\u53cc\u91cd&#xff09;<\/td>\n<td>&#x1f7e1; P1<\/td>\n<\/tr>\n<tr>\n<td>\u66b4\u529b\u7834\u89e3<\/td>\n<td>Nginx limit_req_zone \u9650\u6d41\u767b\u5f55\u63a5\u53e3<\/td>\n<td>&#x1f7e1; P1<\/td>\n<\/tr>\n<tr>\n<td>\u654f\u611f\u4fe1\u606f\u6cc4\u9732<\/td>\n<td>.env \u52a0\u5165 .gitignore&#xff0c;\u65e5\u5fd7\u4e2d\u8131\u654f<\/td>\n<td>&#x1f534; P0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8d8a\u6743\u4fee\u6539\u7684\u6b63\u786e\u5199\u6cd5&#xff1a;<\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">updatePost<\/span><span class=\"token punctuation\">(<\/span>postId<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">,<\/span> data<span class=\"token operator\">:<\/span> UpdatePostInput<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> session <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">getSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>session<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Unauthorized&#039;<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5173\u952e&#xff1a;\u5fc5\u987b\u5728 where \u6761\u4ef6\u91cc\u5e26\u4e0a\u5f52\u5c5e\u6821\u9a8c<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> prisma<span class=\"token punctuation\">.<\/span>post<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateMany<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    where<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      id<span class=\"token operator\">:<\/span> postId<span class=\"token punctuation\">,<\/span><br \/>\n      authorId<span class=\"token operator\">:<\/span> session<span class=\"token punctuation\">.<\/span>userId<span class=\"token punctuation\">,<\/span>   <span class=\"token comment\">\/\/ \u2190 \u8d8a\u6743\u9632\u7ebf<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    data<span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Not found or forbidden&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<hr \/>\n<h3>\u516b\u3001\u8e29\u5751\u5b9e\u5f55\u4e0e\u6545\u969c\u6392\u67e5\u624b\u518c<\/h3>\n<p>\u5751 1&#xff1a;Windows \u4e0b\u6784\u5efa\u5361\u6b7b<\/p>\n<table>\n<tr>\u9879\u5185\u5bb9<\/tr>\n<tbody>\n<tr>\n<td>\u73b0\u8c61<\/td>\n<td>npm run build \u5361\u5341\u5206\u949f\u4ee5\u4e0a\u65e0\u8f93\u51fa<\/td>\n<\/tr>\n<tr>\n<td>\u539f\u56e0<\/td>\n<td>Next.js 16 \u9ed8\u8ba4 Turbopack&#xff0c;Windows \u4e0b\u6587\u4ef6\u7cfb\u7edf\u4e8b\u4ef6\u76d1\u542c\u5b58\u5728\u5df2\u77e5\u95ee\u9898<\/td>\n<\/tr>\n<tr>\n<td>\u89e3\u51b3<\/td>\n<td>npx next build &#8211;webpack<\/td>\n<\/tr>\n<tr>\n<td>\u9a8c\u8bc1<\/td>\n<td>\u6784\u5efa\u5e94\u5728 1-3 \u5206\u949f\u5185\u5b8c\u6210<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u5751 2&#xff1a;prisma db push \u5220\u5217\u8b66\u544a<\/p>\n<table>\n<tr>\u9879\u5185\u5bb9<\/tr>\n<tbody>\n<tr>\n<td>\u73b0\u8c61<\/td>\n<td>\u52a0\u65b0\u5b57\u6bb5\u65f6 Prisma \u63d0\u793a\u8981\u5220\u9664 searchVector \u5217<\/td>\n<\/tr>\n<tr>\n<td>\u539f\u56e0<\/td>\n<td>searchVector \u662f\u539f\u751f SQL \u521b\u5efa\u7684 tsvector \u751f\u6210\u5217&#xff0c;\u4e0d\u53d7 Prisma \u7ba1\u7406<\/td>\n<\/tr>\n<tr>\n<td>\u89e3\u51b3<\/td>\n<td>npx prisma db push &#8211;accept-data-loss<\/td>\n<\/tr>\n<tr>\n<td>\u26a0\ufe0f \u8b66\u544a<\/td>\n<td>\u6b64\u53c2\u6570\u4f1a\u8df3\u8fc7\u6240\u6709\u7834\u574f\u6027\u53d8\u66f4&#xff0c;\u751f\u4ea7\u73af\u5883\u614e\u7528&#xff0c;\u64cd\u4f5c\u524d\u5fc5\u987b\u5907\u4efd<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u5751 3&#xff1a;\u6539\u6635\u79f0\u540e\u5bfc\u822a\u680f\u4e0d\u540c\u6b65<\/p>\n<table>\n<tr>\u9879\u5185\u5bb9<\/tr>\n<tbody>\n<tr>\n<td>\u73b0\u8c61<\/td>\n<td>\u7528\u6237\u6539\u4e86\u6635\u79f0&#xff0c;\u5bfc\u822a\u680f\u4ecd\u663e\u793a\u65e7\u503c<\/td>\n<\/tr>\n<tr>\n<td>\u539f\u56e0<\/td>\n<td>\u6700\u521d\u628a\u6635\u79f0\u5b58\u8fdb\u4e86 JWT \u4f1a\u8bdd&#xff0c;DB \u66f4\u65b0\u540e\u4f1a\u8bdd\u4e0d\u5237\u65b0<\/td>\n<\/tr>\n<tr>\n<td>\u89e3\u51b3<\/td>\n<td>\u4f1a\u8bdd\u53ea\u5b58 userId &#043; role&#xff0c;\u5c55\u793a\u6570\u636e\u901a\u8fc7 \/api\/me \u4ece DB \u5b9e\u65f6\u67e5<\/td>\n<\/tr>\n<tr>\n<td>\u7ecf\u9a8c<\/td>\n<td>\u4f1a\u8bdd\u5b58\u6807\u8bc6&#xff0c;\u6570\u636e\u5b9e\u65f6\u67e5 \u2014\u2014 \u8fd9\u6761\u539f\u5219\u9002\u7528\u4e8e\u6240\u6709\u8ba4\u8bc1\u7cfb\u7edf<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u5751 4&#xff1a;\u4e13\u680f\u516c\u5f00\u8303\u56f4\u5931\u63a7<\/p>\n<table>\n<tr>\u9879\u5185\u5bb9<\/tr>\n<tbody>\n<tr>\n<td>\u73b0\u8c61<\/td>\n<td>\u6240\u6709\u4e13\u680f\u521b\u5efa\u540e\u7acb\u523b\u516c\u5f00&#xff0c;\u524d\u53f0\u5185\u5bb9\u8d28\u91cf\u5931\u63a7<\/td>\n<\/tr>\n<tr>\n<td>\u89e3\u51b3<\/td>\n<td>\u5f15\u5165 DRAFT \u2192 PENDING \u2192 PUBLISHED \u4e09\u7ea7\u72b6\u6001\u673a<\/td>\n<\/tr>\n<tr>\n<td>\u7ecf\u9a8c<\/td>\n<td>\u51e1\u662f\u7528\u6237\u53ef\u521b\u5efa\u3001\u4f1a\u51fa\u73b0\u5728\u516c\u5f00\u5217\u8868\u7684\u5185\u5bb9&#xff0c;\u90fd\u5e94\u8be5\u6709\u72b6\u6001\u5b57\u6bb5 &#043; \u5ba1\u6838\u6d41<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&#x1f527; \u6545\u969c\u6392\u67e5\u901f\u67e5\u8868<\/p>\n<table>\n<tr>\u75c7\u72b6\u53ef\u80fd\u539f\u56e0\u6392\u67e5\u547d\u4ee4<\/tr>\n<tbody>\n<tr>\n<td>502 Bad Gateway<\/td>\n<td>Next.js \u672a\u542f\u52a8 \/ \u7aef\u53e3\u4e0d\u5bf9<\/td>\n<td>pm2 status &#043; curl localhost:3000<\/td>\n<\/tr>\n<tr>\n<td>\u9875\u9762\u767d\u5c4f<\/td>\n<td>\u6784\u5efa\u4ea7\u7269\u7f3a\u5931 \/ \u5ba2\u6237\u7aef\u62a5\u9519<\/td>\n<td>F12 \u63a7\u5236\u53f0 &#043; pm2 logs blog<\/td>\n<\/tr>\n<tr>\n<td>\u767b\u5f55\u540e\u4ecd\u663e\u793a\u672a\u767b\u5f55<\/td>\n<td>Cookie \u672a\u8bbe\u7f6e \/ \u57df\u540d\u4e0d\u5339\u914d<\/td>\n<td>F12 \u2192 Application \u2192 Cookies \u68c0\u67e5<\/td>\n<\/tr>\n<tr>\n<td>GitHub \u6388\u6743\u62a5\u9519<\/td>\n<td>callback URL \u4e0d\u5339\u914d<\/td>\n<td>\u5bf9\u6bd4 GitHub \u8bbe\u7f6e\u4e0e .env \u4e2d\u7684 NEXT_PUBLIC_SITE_URL<\/td>\n<\/tr>\n<tr>\n<td>\u4e0a\u4f20\u5931\u8d25<\/td>\n<td>client_max_body_size \u592a\u5c0f<\/td>\n<td>\u6539 Nginx \u914d\u7f6e\u5e76 reload<\/td>\n<\/tr>\n<tr>\n<td>DB \u8fde\u63a5\u8d85\u65f6<\/td>\n<td>PG \u672a\u542f\u52a8 \/ \u5bc6\u7801\u9519<\/td>\n<td>sudo systemctl status postgresql &#043; psql -U blog<\/td>\n<\/tr>\n<tr>\n<td>\u5b57\u4f53\/\u6837\u5f0f\u9519\u4e71<\/td>\n<td>_next\/static \u7f13\u5b58\u5931\u6548<\/td>\n<td>\u5f3a\u5237 Ctrl&#043;Shift&#043;R<\/td>\n<\/tr>\n<tr>\n<td>\u56fe\u7247 404<\/td>\n<td>\u4e0a\u4f20\u76ee\u5f55\u6743\u9650 \/ \u8def\u5f84\u9519<\/td>\n<td>ls -la .\/public\/uploads \u68c0\u67e5\u6743\u9650<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>\u4e5d\u3001\u603b\u7ed3\u4e0e\u540e\u7eed\u89c4\u5212<\/h3>\n<h4>9.1 \u4ece Flask \u5230 Next.js \u7684\u6536\u76ca<\/h4>\n<table>\n<tr>\u7ef4\u5ea6V1 (Flask)V2.5 (Next.js)\u63d0\u5347<\/tr>\n<tbody>\n<tr>\n<td>SEO<\/td>\n<td>\u5ba2\u6237\u7aef\u6e32\u67d3\u4e3a\u4e3b&#xff0c;\u6293\u4e0d\u5230<\/td>\n<td>RSC &#043; SSG\/ISR<\/td>\n<td>&#x1f53a; \u8d28\u53d8<\/td>\n<\/tr>\n<tr>\n<td>\u9996\u5c4f\u6027\u80fd<\/td>\n<td>\u4e00\u822c<\/td>\n<td>Lighthouse 90&#043;<\/td>\n<td>&#x1f53a; \u663e\u8457<\/td>\n<\/tr>\n<tr>\n<td>\u5f00\u53d1\u6548\u7387<\/td>\n<td>\u6a21\u677f\u6539\u6837\u5f0f\u6162<\/td>\n<td>Tailwind &#043; \u7ec4\u4ef6\u5316<\/td>\n<td>&#x1f53a; \u663e\u8457<\/td>\n<\/tr>\n<tr>\n<td>\u5185\u5bb9\u6cbb\u7406<\/td>\n<td>\u65e0<\/td>\n<td>\u72b6\u6001\u673a &#043; \u5ba1\u6838\u6d41<\/td>\n<td>\u2705 \u4ece 0 \u5230 1<\/td>\n<\/tr>\n<tr>\n<td>\u7528\u6237\u4f53\u7cfb<\/td>\n<td>\u65e0<\/td>\n<td>OAuth &#043; JWT<\/td>\n<td>\u2705 \u4ece 0 \u5230 1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u6700\u76f4\u89c2\u7684\u611f\u53d7&#xff1a;Server Components \u9ed8\u8ba4\u6e32\u67d3\u8ba9 SEO \u5929\u7136\u53cb\u597d&#xff1b;Prisma \u8ba9\u6570\u636e\u5e93\u64cd\u4f5c\u4e0d\u7528\u624b\u5199 SQL&#xff1b;\u6587\u4ef6\u8def\u7531\u4e0d\u7528\u518d\u7ef4\u62a4\u8def\u7531\u8868\u3002<\/p>\n<h4>9.2 V2.6 \u89c4\u5212\u8def\u7ebf<\/h4>\n<ul>\n<li class=\"task-list-item\"> \u8bc4\u8bba\u7cfb\u7edf&#xff1a;\u652f\u6301 Markdown &#043; \u697c\u4e2d\u697c\u5d4c\u5957 &#043; \u654f\u611f\u8bcd\u8fc7\u6ee4<\/li>\n<li class=\"task-list-item\"> \u70b9\u8d5e\u6536\u85cf&#xff1a;Redis \u8ba1\u6570\u5668 &#043; \u9632\u5237\u7b56\u7565<\/li>\n<li class=\"task-list-item\"> RSS \/ Sitemap&#xff1a;\u8ba9\u722c\u866b\u66f4\u53cb\u597d<\/li>\n<li class=\"task-list-item\"> \u6df1\u8272\u6a21\u5f0f&#xff1a;CSS \u53d8\u91cf\u4e3b\u9898\u5207\u6362&#xff08;Tailwind dark: \u7c7b&#xff09;<\/li>\n<li class=\"task-list-item\"> \u5168\u6587\u641c\u7d22&#xff1a;PostgreSQL tsvector &#043; GIN \u7d22\u5f15<\/li>\n<li class=\"task-list-item\"> \u56fe\u7247 CDN&#xff1a;\u63a5\u817e\u8baf\u4e91 COS&#xff0c;\u51cf\u8f7b\u670d\u52a1\u5668\u5e26\u5bbd\u538b\u529b<\/li>\n<li class=\"task-list-item\"> \u76d1\u63a7\u544a\u8b66&#xff1a;\u63a5\u5165 Sentry&#xff08;\u9519\u8bef&#xff09;&#043; UptimeRobot&#xff08;\u53ef\u7528\u6027&#xff09;<\/li>\n<\/ul>\n<hr \/>\n<h3>&#x1f517; \u9879\u76ee\u5730\u5740<\/h3>\n<ul>\n<li>GitHub&#xff1a;https:\/\/github.com\/Wasd2490\/Full_stack-_blog-_version2<\/li>\n<li>\u6280\u672f\u6808&#xff1a;Next.js 16 \u00b7 TypeScript \u00b7 Prisma \u00b7 PostgreSQL 16 \u00b7 Tailwind CSS 4<\/li>\n<\/ul>\n<hr \/>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261031144111-6ae5fe07d95b2.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<h3>\u9644\u5f55&#xff1a;\u5e38\u7528\u547d\u4ee4\u901f\u67e5\u8868<\/h3>\n<table>\n<tr>\u573a\u666f\u547d\u4ee4<\/tr>\n<tbody>\n<tr>\n<td>\u540c\u6b65 DB \u8868\u7ed3\u6784<\/td>\n<td>npx prisma db push<\/td>\n<\/tr>\n<tr>\n<td>\u5f3a\u5236\u540c\u6b65&#xff08;\u8df3\u8fc7\u8b66\u544a&#xff09;<\/td>\n<td>npx prisma db push &#8211;accept-data-loss<\/td>\n<\/tr>\n<tr>\n<td>\u751f\u6210 Prisma Client<\/td>\n<td>npx prisma generate<\/td>\n<\/tr>\n<tr>\n<td>\u6253\u5f00\u53ef\u89c6\u5316 DB<\/td>\n<td>npx prisma studio<\/td>\n<\/tr>\n<tr>\n<td>\u751f\u4ea7\u6784\u5efa&#xff08;Windows&#xff09;<\/td>\n<td>npx next build &#8211;webpack<\/td>\n<\/tr>\n<tr>\n<td>\u751f\u6210\u968f\u673a\u5bc6\u94a5<\/td>\n<td>openssl rand -base64 32<\/td>\n<\/tr>\n<tr>\n<td>PM2 \u542f\u52a8<\/td>\n<td>pm2 start npm &#8211;name &#034;blog&#034; &#8212; start<\/td>\n<\/tr>\n<tr>\n<td>PM2 \u67e5\u770b\u65e5\u5fd7<\/td>\n<td>pm2 logs blog<\/td>\n<\/tr>\n<tr>\n<td>PM2 \u96f6\u505c\u673a\u91cd\u8f7d<\/td>\n<td>pm2 reload blog<\/td>\n<\/tr>\n<tr>\n<td>Nginx \u8bed\u6cd5\u68c0\u67e5<\/td>\n<td>sudo nginx -t<\/td>\n<\/tr>\n<tr>\n<td>Nginx \u91cd\u8f7d<\/td>\n<td>sudo systemctl reload nginx<\/td>\n<\/tr>\n<tr>\n<td>\u7b7e\u53d1 HTTPS \u8bc1\u4e66<\/td>\n<td>sudo certbot &#8211;nginx -d \u57df\u540d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<p>&#x1f4dd; \u58f0\u660e&#xff1a;\u672c\u6587\u6240\u6709\u4ee3\u7801\u7247\u6bb5\u5747\u6765\u81ea\u771f\u5b9e\u9879\u76ee&#xff0c;\u53ef\u76f4\u63a5\u590d\u73b0\u3002\u751f\u4ea7\u90e8\u7f72\u524d\u8bf7\u52a1\u5fc5\u9605\u8bfb\u300c\u5b89\u5168\u52a0\u56fa\u5efa\u8bae\u300d\u4e00\u8282\u3002\u5982\u679c\u4f60\u5728\u90e8\u7f72\u8fc7\u7a0b\u4e2d\u9047\u5230\u672c\u6587\u672a\u8986\u76d6\u7684\u95ee\u9898&#xff0c;\u6b22\u8fce\u4ea4\u6d41\u3002<\/p>\n<p>&#x1f44d; \u5982\u679c\u89c9\u5f97\u6709\u5e2e\u52a9&#xff0c;\u6b22\u8fce\u70b9\u8d5e &#043; \u6536\u85cf &#043; \u5173\u6ce8&#xff0c;\u540e\u7eed\u4f1a\u7ee7\u7eed\u66f4\u65b0\u672c\u9879\u76ee\u7684\u8fed\u4ee3\u5b9e\u5f55\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x1f338; \u4ece Flask \u5230 Next.js&#xff1a;\u6211\u7684\u4e2a\u4eba\u535a\u5ba2 V2.5 \u5168\u6808\u91cd\u6784\u5b9e\u5f55&#xff08;\u542b\u817e\u8baf\u4e91\u90e8\u7f72\u5b8c\u6574\u6307\u5357&#xff09;&#x1f4cc; \u6587\u7ae0\u5bfc\u89c8&#xff1a;\u672c\u6587\u5b8c\u6574\u8bb0\u5f55\u4e86\u4e2a\u4eba\u535a\u5ba2\u4ece Flask  SQLite \u5355\u4f53\u67b6\u6784\u91cd\u6784\u4e3a Next.js 16 (App Router)  Prisma 6  PostgreSQL 16 \u5168\u6808\u5e94\u7528\u7684\u5168\u8fc7\u7a0b\u3002\u5168\u6587\u7ea6 18000 \u5b57&#xff0c;\u542b 30 \u53ef\u76f4\u63a5\u590d\u7528\u7684\u4ee3\u7801\u7247\u6bb5&#xff0c;\u8986\u76d6\u67b6\u6784<\/p>\n","protected":false},"author":2,"featured_media":120540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[153,187,4403],"topic":[],"class_list":["post-120541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-flask","tag-javascript","tag-4403"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55 - \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\/120541.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"&#x1f338; \u4ece Flask \u5230 Next.js&#xff1a;\u6211\u7684\u4e2a\u4eba\u535a\u5ba2 V2.5 \u5168\u6808\u91cd\u6784\u5b9e\u5f55&#xff08;\u542b\u817e\u8baf\u4e91\u90e8\u7f72\u5b8c\u6574\u6307\u5357&#xff09;&#x1f4cc; \u6587\u7ae0\u5bfc\u89c8&#xff1a;\u672c\u6587\u5b8c\u6574\u8bb0\u5f55\u4e86\u4e2a\u4eba\u535a\u5ba2\u4ece Flask SQLite \u5355\u4f53\u67b6\u6784\u91cd\u6784\u4e3a Next.js 16 (App Router) Prisma 6 PostgreSQL 16 \u5168\u6808\u5e94\u7528\u7684\u5168\u8fc7\u7a0b\u3002\u5168\u6587\u7ea6 18000 \u5b57&#xff0c;\u542b 30 \u53ef\u76f4\u63a5\u590d\u7528\u7684\u4ee3\u7801\u7247\u6bb5&#xff0c;\u8986\u76d6\u67b6\u6784\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/120541.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-31T14:41:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261031144111-6ae5fe07d95b2.png\" \/>\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=\"24 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/120541.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/120541.html\",\"name\":\"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-10-31T14:41:16+00:00\",\"dateModified\":\"2026-10-31T14:41:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/120541.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/120541.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/120541.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55\"}]},{\"@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":"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55 - \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\/120541.html","og_locale":"zh_CN","og_type":"article","og_title":"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"&#x1f338; \u4ece Flask \u5230 Next.js&#xff1a;\u6211\u7684\u4e2a\u4eba\u535a\u5ba2 V2.5 \u5168\u6808\u91cd\u6784\u5b9e\u5f55&#xff08;\u542b\u817e\u8baf\u4e91\u90e8\u7f72\u5b8c\u6574\u6307\u5357&#xff09;&#x1f4cc; \u6587\u7ae0\u5bfc\u89c8&#xff1a;\u672c\u6587\u5b8c\u6574\u8bb0\u5f55\u4e86\u4e2a\u4eba\u535a\u5ba2\u4ece Flask SQLite \u5355\u4f53\u67b6\u6784\u91cd\u6784\u4e3a Next.js 16 (App Router) Prisma 6 PostgreSQL 16 \u5168\u6808\u5e94\u7528\u7684\u5168\u8fc7\u7a0b\u3002\u5168\u6587\u7ea6 18000 \u5b57&#xff0c;\u542b 30 \u53ef\u76f4\u63a5\u590d\u7528\u7684\u4ee3\u7801\u7247\u6bb5&#xff0c;\u8986\u76d6\u67b6\u6784","og_url":"https:\/\/www.wsisp.com\/helps\/120541.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-10-31T14:41:16+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261031144111-6ae5fe07d95b2.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"24 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/120541.html","url":"https:\/\/www.wsisp.com\/helps\/120541.html","name":"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-10-31T14:41:16+00:00","dateModified":"2026-10-31T14:41:16+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/120541.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/120541.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/120541.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u4eceFlask\u5230Next.js\u535a\u5ba2V2.5\u91cd\u6784\u5b9e\u5f55"}]},{"@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\/120541","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=120541"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/120541\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/120540"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=120541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=120541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=120541"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=120541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}