1:HL["/_next/static/css/275839517c59c532.css",{"as":"style"}]
2:HL["/_next/static/css/bdb880d990e879b6.css",{"as":"style"}]
0:[[["",{"children":["post",{"children":[["slug","rewrite-blog-with-next","d"],{"children":["__PAGE__?{\"slug\":\"rewrite-blog-with-next\"}",{}]}]}]},"$undefined","$undefined",true],"$L3",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/275839517c59c532.css","precedence":"next"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/bdb880d990e879b6.css","precedence":"next"}]],["$L4",null]]]]
5:HL["/_next/static/css/95c7fb627fba8423.css",{"as":"style"}]
6:HL["/_next/static/css/477df780fc5cb593.css",{"as":"style"}]
7:HL["/_next/static/css/c40a92e7f996f910.css",{"as":"style"}]
3:["$L8",null]
4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"用 Next.js 重写 Hexo 博客"}],["$","meta","2",{"name":"description","content":"用 Next.js 重写 Hexo 博客"}],["$","link","3",{"rel":"manifest","href":"/manifest.json"}],["$","meta","4",{"name":"generator","content":"Hexo.js & Next.js"}],["$","meta","5",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","6",{"property":"og:title","content":"用 Next.js 重写 Hexo 博客"}],["$","meta","7",{"property":"og:description","content":"用 Next.js 重写 Hexo 博客"}],["$","meta","8",{"name":"twitter:card","content":"summary"}],["$","meta","9",{"name":"twitter:title","content":"用 Next.js 重写 Hexo 博客"}],["$","meta","10",{"name":"twitter:description","content":"用 Next.js 重写 Hexo 博客"}]]
9:I{"id":"7477","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","859:static/chunks/859-ea023633456a13f8.js","355:static/chunks/app/tags/[slug]/page-257dc97429efd72a.js"],"name":"","async":false}
a:I{"id":"92","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"","async":false}
b:I{"id":"2449","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"","async":false}
c:I{"id":"3211","chunks":["272:static/chunks/webpack-7471fa70de6bdb29.js","253:static/chunks/bce60fc1-2413e66000a5dd8f.js","769:static/chunks/769-2bf088c0a421e73d.js"],"name":"","async":false}
d:I{"id":"5767","chunks":["272:static/chunks/webpack-7471fa70de6bdb29.js","253:static/chunks/bce60fc1-2413e66000a5dd8f.js","769:static/chunks/769-2bf088c0a421e73d.js"],"name":"","async":false}
f:I{"id":"6424","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"GaLite","async":false}
10:I{"id":"9869","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"SpeedInsights","async":false}
11:I{"id":"7148","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","185:static/chunks/app/layout-4eab34e1c4d9af8d.js"],"name":"Analytics","async":false}
8:["$","html",null,{"lang":"zh-CN","children":[["$","link",null,{"rel":"icon","href":"/images/icons/icon-72x72.png","type":"image/x-icon"}],["$","link",null,{"rel":"preconnect","href":"https://vip2.loli.io"}],["$","link",null,{"rel":"dns-prefetch","href":"https://vip2.loli.io"}],["$","link",null,{"rel":"alternate","type":"application/atom+xml","href":"/atom.xml"}],["$","body",null,{"children":["$","div",null,{"className":"kbCXHY jdraHW eqrBPF kEFtPS bNzOWQ juexza kXMrYr ","children":[["$","header",null,{"className":"doNOqr WhAZY cRUUAa cwMEsi dpJmjl bsTuZj iRietU JCsMI fONtwf eEsPgn gWUoqV kazZiE fsKTUV dkPCxO gdGTeM ","children":[["$","div",null,{"className":"doNOqr WhAZY hrtgtE iYRJzs iJGxaV jlwzhw ","children":[["$","$L9",null,{"className":"icyDkI gSBWlu foGVKH IVbXa kooHYa JxWnH cVJMrm hyoqRt jlijat kUpitc gdtkYW iDPWLw kayxZK hCkclF cneMsd gYPNzh ","href":"/","children":[["$","div",null,{"className":"eSltVp cpOcAb caItCN cyerGB dSxtaa lbEyiT kUPESX Pmecg ldtSOY ","children":["$","$La",null,{"src":"https://vip2.loli.io/2023/03/09/2tAMcy694lE3IZX.jpg","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAW0lEQVR4nAFQAK//AAAAAA0MCD08JoiyXkqWNQBPSDHtwYf/86ehuWNAeS4Aep9O+bt9/9aWxbtzETMSAClqHld9MqambcuqdgMOAwBCaS1Mdzd/hFE4PCMEEAS4ex049PWXOAAAAABJRU5ErkJggg==","alt":"avatar","width":200,"height":200,"layout":"responsive","className":"jWjrEQ eKtERL BRobm iovjFN ","placeholder":"blur","priority":true}]}],["$","h1",null,{"className":"evYdWj cpOcAb XEVlt huiurs ","children":"fengkx's Blog"}]]}],["$","h2",null,{"id":"name","className":"hrtgtE fcXWHl ","children":"fengkx"}],["$","h3",null,{"id":"title","className":"hrtgtE fcXWHl ","children":"Student & Coder"}],["$","div",null,{"className":"fONtwf fcXWHl foGVKH IVbXa dPVLzs fkrGAA cvCecb jJGIjV ","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"d":"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z","children":"$undefined"}],["$","circle","1",{"cx":"12","cy":"10","r":"3","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"gUpJEt ","children":"Guangzhou, China"}]]}],["$","nav",null,{"className":"hrtgtE jlwzhw gSBWlu IVbXa kKRHCo jzaqKj ehqwGF ","children":[["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z","children":"$undefined"}],["$","polyline","1",{"points":"9 22 9 12 15 12 15 22","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"首页"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/archives","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","polyline","0",{"points":"21 8 21 21 3 21 3 8","children":"$undefined"}],["$","rect","1",{"x":"1","y":"3","width":"22","height":"5","children":"$undefined"}],["$","line","2",{"x1":"10","y1":"12","x2":"14","y2":"12","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"归档"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/tags","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z","children":"$undefined"}],["$","line","1",{"x1":"7","y1":"7","x2":"7.01","y2":"7","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"标签"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/links","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2","children":"$undefined"}],["$","circle","1",{"cx":"9","cy":"7","r":"4","children":"$undefined"}],["$","path","2",{"d":"M23 21v-2a4 4 0 0 0-3-3.87","children":"$undefined"}],["$","path","3",{"d":"M16 3.13a4 4 0 0 1 0 7.75","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"友链"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/about","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"jJhMtm fcXWHl gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M18 8h1a4 4 0 0 1 0 8h-1","children":"$undefined"}],["$","path","1",{"d":"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z","children":"$undefined"}],["$","line","2",{"x1":"6","y1":"1","x2":"6","y2":"4","children":"$undefined"}],["$","line","3",{"x1":"10","y1":"1","x2":"10","y2":"4","children":"$undefined"}],["$","line","4",{"x1":"14","y1":"1","x2":"14","y2":"4","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"","children":"关于"}]]}]}],["$","div",null,{"className":"kooHYa ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/search","children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"cpOcAb gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","circle","0",{"cx":"11","cy":"11","r":"8","children":"$undefined"}],["$","line","1",{"x1":"21","y1":"21","x2":"16.65","y2":"16.65","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"jJhMtm fcXWHl ","children":"搜索"}]]}]}],["$","div",null,{"className":"kooHYa evYdWj ","children":["$","$L9",null,{"className":"gSBWlu foGVKH fPWmiY JxWnH cVJMrm OqOoD jJbtJp ihIJmy bgUfpT AsNjI kwISoH gdPTUr eLDTYY dmKgnC dPFrWx bmQfsF krqYva kXurrt ","href":"/atom.xml","prefetch":false,"children":[["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","className":"cpOcAb gdPTUr dCiVRS TTRIX ","children":["$undefined",[["$","path","0",{"d":"M4 11a9 9 0 0 1 9 9","children":"$undefined"}],["$","path","1",{"d":"M4 4a16 16 0 0 1 16 16","children":"$undefined"}],["$","circle","2",{"cx":"5","cy":"19","r":"1","children":"$undefined"}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}],["$","span",null,{"className":"jJhMtm fcXWHl ","children":"RSS"}]]}]}]]}]]}],["$","div",null,{"className":"doNOqr hrtgtE fcXWHl iigETV bMSzLf XEVlt jmezSN izetJs kdrTtD bLIxaN ","children":[["$","div",null,{"className":"iLYBKc gSBWlu zEGrF evYWGf hDdCaA ","children":[["$","$L9",null,{"title":"fengkx's GitHub","href":"https://github.com/fengkx","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"d":"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","$L9",null,{"title":"fengkx's Telegram","href":"https://t.me/fengkx","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","line","0",{"x1":"22","y1":"2","x2":"11","y2":"13","children":"$undefined"}],["$","polygon","1",{"points":"22 2 15 22 11 13 2 9 22 2","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","$L9",null,{"href":"https://mstdn.social/@fengkx","rel":"me","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"stroke":"none","d":"M0 0h24v24H0z","fill":"none","children":"$undefined"}],["$","path","1",{"d":"M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944z","children":"$undefined"}],["$","path","2",{"d":"M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","$L9",null,{"title":"RSS feed","href":"/atom.xml","prefetch":false,"children":["$","svg",null,{"stroke":"currentColor","fill":"none","strokeWidth":"2","viewBox":"0 0 24 24","strokeLinecap":"round","strokeLinejoin":"round","children":["$undefined",[["$","path","0",{"d":"M4 11a9 9 0 0 1 9 9","children":"$undefined"}],["$","path","1",{"d":"M4 4a16 16 0 0 1 16 16","children":"$undefined"}],["$","circle","2",{"cx":"5","cy":"19","r":"1","children":"$undefined"}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}]]}],["$","div",null,{"className":"hrtgtE fcXWHl cyerGB kKRHCo ","children":["Build with ",["$","$L9",null,{"title":"Hexo official site","rel":"noopener noreferrer external nofollow","href":"https://hexo.io","children":"Hexo"}]," ","and"," ",["$","$L9",null,{"title":"Next.js official site","href":"https://nextjs.org","rel":"noopener noreferrer external nofollow","children":"Next.js"}]]}]]}]]}],["$","$Lb",null,{"children":["$","$Lc",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$Ld",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$Lc",null,{"parallelRouterKey":"children","segmentPath":["children","post","children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$Ld",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$Lc",null,{"parallelRouterKey":"children","segmentPath":["children","post","children",["slug","rewrite-blog-with-next","d"],"children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$Ld",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$Le",null],"segment":"__PAGE__?{\"slug\":\"rewrite-blog-with-next\"}"},"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/275839517c59c532.css","precedence":"next"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/95c7fb627fba8423.css","precedence":"next"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/css/477df780fc5cb593.css","precedence":"next"}],["$","link","3",{"rel":"stylesheet","href":"/_next/static/css/c40a92e7f996f910.css","precedence":"next"}]]}],"segment":["slug","rewrite-blog-with-next","d"]},"styles":[]}],"segment":"post"},"styles":[]}]}],["$","$Lf",null,{"uaId":"UA-103237573-1"}],["$","$L10",null,{}],["$","$L11",null,{}]]}]}]]}]
13:I{"id":"5307","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"TocTitle","async":false}
e:[false,["$","main",null,{"className":"prose eUUCKp kTeytq jmezSN cjScYX eqrBPF jdraHW cRUUAa DOWJl hgvoZN iZwowi jGHqUK kwISoH AsNjI","children":[["$","h1",null,{"className":"EKhXX ","children":"用 Next.js 重写 Hexo 博客"}],"$L12"]}],["$","aside",null,{"className":"cwMEsi dpJmjl gWUoqV kazZiE fsKTUV dkPCxO fcXWHl hrtgtE icKiSN eeREmo fZMRmg hRjOno ","children":["$","div",null,{"className":"doNOqr gepZXl  AsideContainer_asideContainer___FNWl","children":["$","div",null,{"className":"bKqOie lkcNSa doNOqr dNtEOi ","children":[["$","div",null,{"className":"hlBtvm ckBWJI XEVlt ","children":"文章目录"}],["$","div",null,{"className":"$undefined","children":["$","ol",null,{"className":"jOeduE ","children":[["$","li",null,{"children":[["$","$L13",null,{"id":"Server-Component","text":"Server Component"}],["$","ol",null,{"className":"jOeduE  iDuqPI ","children":[["$","li",null,{"children":[["$","$L13",null,{"id":"什么东西会到达-client-side","text":"什么东西会到达 client side"}],false]}]]}]]}],["$","li",null,{"children":[["$","$L13",null,{"id":"Hexo-集成","text":"Hexo 集成"}],false]}],["$","li",null,{"children":[["$","$L13",null,{"id":"CSS-方案选择","text":"CSS 方案选择"}],["$","ol",null,{"className":"jOeduE  iDuqPI ","children":[["$","li",null,{"children":[["$","$L13",null,{"id":"Tailwind-的问题","text":"Tailwind 的问题"}],false]}]]}]]}],["$","li",null,{"children":[["$","$L13",null,{"id":"迁移到-style9","text":"迁移到 style9"}],false]}]]}]}]]}]}]}]]
14:I{"id":"4998","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"ArticleContentClient","async":false}
17:I{"id":"7974","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"H2","async":false}
18:I{"id":"7974","chunks":["194:static/chunks/194-26e3c21be498c0ce.js","92:static/chunks/92-371a458fbe090447.js","284:static/chunks/284-b1d21b691d3eabee.js","605:static/chunks/app/post/[slug]/page-0339b76e369b6af8.js"],"name":"H3","async":false}
12:["$","$L14",null,{"permalink":"https://www.fengkx.top/post/rewrite-blog-with-next/","dateString":"2023-03-12","comments":true,"aplayer":false,"showCopyright":true,"children":[["$","p","849",{"children":["在看了 ","$L15"," 后，我也有了相关的想法。正好 Next.js 13 推出了 ","$L16"," 可以直接在 React 组件内写服务端逻辑。正好适合用来跑 hexo，于是就开始动工了。"]}],"\n",["$","$L17","850",{"id":"Server-Component","children":["Server Component"]}],"\n",["$","$L18","851",{"id":"什么东西会到达-client-side","children":["什么东西会到达 client side"]}],"\n",["$","p","853",{"children":["Server Component 的一大亮点就是可以","$L19","，但是究竟减少了什么东西呢。要回答这个问题，我们首先要了解什么东西会被发送到 client side。"]}],"\n",["$","p","858",{"children":["在 Server Component 之前 Next.js 提供的 ",["$","code","854",{"children":["getStaticProps/getServerSideProps"]}]," 做 SSG/SSR。这两个函数跟 Server Component 一样也是在服务端执行代码。函数返回值里的",["$","code","855",{"children":["props"]}]," 对象能在页面组件的 props 中拿到。如果你研究过 Next.js 生成的页面就会发现，除了 SSR/SSG 生成的 HTML 里有 props 相关的内容，还有一个 id 为",["$","code","856",{"children":["_NEXT_DATA"]}],"的 script tag，把服务端生成的 props 以 json 的形式又存了一遍，用来给 client side 做 ","$L1a","。"]}],"\n",["$","p","860",{"children":[["$","$La",null,{"className":"m-img","id":"$undefined","alt":"bytedancenextdata","style":"$undefined","loading":"lazy","src":"https://vip2.loli.io/2023/03/09/12TdZV5MINS6Lqh.png","width":2272,"height":546,"placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAIAAACZnPOkAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAGElEQVR4nGN4/f//yu2nvaNzHYNT5U3cAU6sB7uZsmvfAAAAAElFTkSuQmCC"}]]}],"\n",["$","p","864",{"children":[["$","code","861",{"children":["getStaticProps/getServerSideProps"]}]," 在这里作为一个 client/server 的边界，函数内部的依赖只存在于 server，它返回值中的",["$","code","862",{"children":["props"]}],"会序列化成 JSON 送到 client side。除此之外，由于 hydrate 结果需要跟预渲染的 HTML 严格对应，所以",["$","strong","863",{"children":["所有 Page 组件用到的 JavaScript 都会"]}],"进 client side。"]}],"\n",["$","p","866",{"children":["对于 Server Component 而言，也存在类似的边界。这个边界从 Page 级变为了粒度更细的 Component 级，即 Server Component 和使用 ",["$","code","865",{"children":["use client"]}]," 声明的 Client Component 之间的边界。而且由于 Server Compoent 不能使用绑定事件，也不能使用 hook 声明 state，所以 Server Component 不需要经过 hydrate 的过程，相关的依赖不需要发送的 client side。"]}],"\n",["$","p","868",{"children":["但数据穿过这个边界的时候，同样也需要发送到 client side，这个过程中同样会经过序列化，所以当我们把函数之类无法序列化的东西从 Server Component 作为 props 时，会报错。这个传输的序列化格式也不是 json，而是 react 实现的","$L1b","。"]}],"\n",["$","pre","913",{"className":"shiki github-light","style":{"backgroundColor":"#fff","color":"#24292e"},"tabindex":"0","children":[["$","code","912",{"className":"language-json","children":[["$","span","884",{"className":"line","children":[["$","span","869",{"style":{"color":"#24292E"},"children":["["]}],["$","span","870",{"style":{"color":"#032F62"},"children":["\"$\""]}],["$","span","871",{"style":{"color":"#24292E"},"children":[","]}],["$","span","872",{"style":{"color":"#032F62"},"children":["\"meta\""]}],["$","span","873",{"style":{"color":"#24292E"},"children":[","]}],["$","span","874",{"style":{"color":"#005CC5"},"children":["null"]}],["$","span","875",{"style":{"color":"#24292E"},"children":[",{"]}],["$","span","876",{"style":{"color":"#005CC5"},"children":["\"name\""]}],["$","span","877",{"style":{"color":"#24292E"},"children":[":"]}],["$","span","878",{"style":{"color":"#032F62"},"children":["\"generator\""]}],["$","span","879",{"style":{"color":"#24292E"},"children":[","]}],["$","span","880",{"style":{"color":"#005CC5"},"children":["\"content\""]}],["$","span","881",{"style":{"color":"#24292E"},"children":[":"]}],["$","span","882",{"style":{"color":"#032F62"},"children":["\"Hexo.js & Next.js\""]}],["$","span","883",{"style":{"color":"#24292E"},"children":["}]"]}]]}],"\n",["$","span","911",{"className":"line","children":[["$","span","885",{"style":{"color":"#005CC5"},"children":["5"]}],["$","span","886",{"style":{"color":"#24292E"},"children":[":I{"]}],["$","span","887",{"style":{"color":"#005CC5"},"children":["\"id\""]}],["$","span","888",{"style":{"color":"#24292E"},"children":[":"]}],["$","span","889",{"style":{"color":"#032F62"},"children":["\"9065\""]}],["$","span","890",{"style":{"color":"#24292E"},"children":[","]}],["$","span","891",{"style":{"color":"#005CC5"},"children":["\"name\""]}],["$","span","892",{"style":{"color":"#24292E"},"children":[":"]}],["$","span","893",{"style":{"color":"#032F62"},"children":["\"\""]}],["$","span","894",{"style":{"color":"#24292E"},"children":[","]}],["$","span","895",{"style":{"color":"#005CC5"},"children":["\"chunks\""]}],["$","span","896",{"style":{"color":"#24292E"},"children":[":["]}],["$","span","897",{"style":{"color":"#032F62"},"children":["\"313:style9-d090fe9341ff38d2\""]}],["$","span","898",{"style":{"color":"#24292E"},"children":[","]}],["$","span","899",{"style":{"color":"#032F62"},"children":["\"71:71-82b18e6f5d306cf7\""]}],["$","span","900",{"style":{"color":"#24292E"},"children":[","]}],["$","span","901",{"style":{"color":"#032F62"},"children":["\"65:65-bf32b72b8c0f255e\""]}],["$","span","902",{"style":{"color":"#24292E"},"children":[","]}],["$","span","903",{"style":{"color":"#032F62"},"children":["\"467:467-e4e9ede7ad711e5f\""]}],["$","span","904",{"style":{"color":"#24292E"},"children":[","]}],["$","span","905",{"style":{"color":"#032F62"},"children":["\"605:app/post/[slug]/page-5726ac97dd32c035\""]}],["$","span","906",{"style":{"color":"#24292E"},"children":["],"]}],["$","span","907",{"style":{"color":"#005CC5"},"children":["\"async\""]}],["$","span","908",{"style":{"color":"#24292E"},"children":[":"]}],["$","span","909",{"style":{"color":"#005CC5"},"children":["false"]}],["$","span","910",{"style":{"color":"#24292E"},"children":["}"]}]]}]]}]]}],"\n",["$","p","916",{"children":["在 Next.js ouput 目录中可以看到",["$","code","914",{"children":[".rsc"]}],"后缀的文件有类似这样的内容，","$L1c"," Client component 操作导致 Server Component 变化也会序列化成这种格式发送。但是对于静态的博客内容就不用考虑了。"]}],"\n",["$","$L17","917",{"id":"Hexo-集成","children":["Hexo 集成"]}],"\n",["$","p","920",{"children":["毕竟有前人经验，所以过程还算顺利。一个遇到的问题是 hexo 中可能是 worker 导致引用不同 instanceof 失效，需要 patch。其他的一些问题只需把相关的包要加到 Next.js 的",["$","code","918",{"children":["serverComponentsExternalPackages"]}],"中让它不走 webpack bundle 就基本没问题了。hexo 初始化完之后基本东西都可以",["$","code","919",{"children":["hexo.locals"]}],"中取到，跟写 ejs 模版区别不大。"]}],"\n",["$","p","923",{"children":["相比在",["$","code","921",{"children":["getStaticProps"]}],"中调用 hexo，直接在 Server component 中调用更加自然也不用手动在 client side 代码 从 JSON 构建 ReactNode 了。更细粒度的服务端组件可以更方便的在服务端一些事情。比如在 Image 组件分成两块，Server Compoent 部分可以通过 ","$L1d"," 获取图片宽高生成占位符，然后再传给 Client Side component 做 lazy load / 点击放大之类的事情。"]}],"\n",["$","$L17","924",{"id":"CSS-方案选择","children":["CSS 方案选择"]}],"\n",["$","p","925",{"children":["Atomic CSS 些很有吸引力的好处如：更小而且不容易增长的 css 大小，不用考虑优先级问题等好处。而像 style9 这样的 CSS in JS 库更是把 “将一个 CSS 拆成多个原子声明 “的过程自动化了。所以最开始一版实现中，我也尝试了使用 style9 但是由于当时对它还有市面上其他支持编译期生成的 CSS in JS 库对 Next 13 的支持都有这样那样的问题。我还是用 tailwindcss 完整实现了一遍而没有用 style9。"]}],"\n",["$","$L18","926",{"id":"Tailwind-的问题","children":["Tailwind 的问题"]}],"\n",["$","p","927",{"children":["上面提到 Server Component 传给 Client Component 的 props 会被序列化传给 client Side，而 className 也不例外。相当于每次在 className 上写一个 byte client 上就要多下两个 byte（不考虑压缩），一个在 pre rendered 的 HTML 一个在后面的 Wire 格式对象中"]}],"\n",["$","p","929",{"children":[["$","$La",null,{"className":"m-img","id":"$undefined","alt":"wire format send","style":"$undefined","loading":"lazy","src":"https://vip2.loli.io/2023/03/11/LSctyVfgRPGnuij.png","width":2012,"height":516,"placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAIAAACZnPOkAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAGElEQVR4nGPQ1NTU11A30FDXUVfTU1cHABOfAm51aJjWAAAAAElFTkSuQmCC"}]]}],"\n",["$","p","931",{"children":["style9 有 ",["$","code","930",{"children":["incrementalClassnames"]}]," 选项可以生成更短的 className。除此之外还有同样的 class 优先级跟生成的 CSS 顺序有关，难以覆盖的问题，开发体验不是那么好。"]}],"\n",["$","$L18","932",{"id":"迁移到-style9","children":["迁移到 style9"]}],"\n",["$","p","935",{"children":["后来 ","$L1e"," 支持了 Next.js 13 的 app dir，然后发现了 ","$L1f"," 这样的 macro 可以进行转换，决定从 Tailwind 迁移到 style9。这样我既可以用 CSS in JS 更获得更好的开发体验，也不会丢掉 Tailwind 这样的 preset 带来统一的设计风格。"]}],"\n",["$","p","937",{"children":["stailwc 和 style9 两者都会在编译期对代码进行操作，stailwc 是一个 swc 插件，style9 是一个 babel 插件。Next.js 中提供了 ",["$","code","936",{"children":["experimental.swcPlugins"]}]," 配置，style9 则提供了相关的 Next.js 插件。我首先写出这样的代码"]}],"\n",["$","pre","966",{"className":"shiki github-light","style":{"backgroundColor":"#fff","color":"#24292e"},"tabindex":"0","children":[["$","code","965",{"className":"language-typescript","children":[["$","span","944",{"className":"line","children":[["$","span","938",{"style":{"color":"#D73A49"},"children":["const"]}],["$","span","939",{"style":{"color":"#005CC5"},"children":[" styles"]}],["$","span","940",{"style":{"color":"#D73A49"},"children":[" ="]}],["$","span","941",{"style":{"color":"#24292E"},"children":[" style9."]}],["$","span","942",{"style":{"color":"#6F42C1"},"children":["create"]}],["$","span","943",{"style":{"color":"#24292E"},"children":["({"]}]]}],"\n",["$","span","948",{"className":"line","children":[["$","span","945",{"style":{"color":"#24292E"},"children":["    main: "]}],["$","span","946",{"style":{"color":"#6F42C1"},"children":["tw"]}],["$","span","947",{"style":{"color":"#032F62"},"children":["`mx-auto max-w-prose`"]}]]}],"\n",["$","span","950",{"className":"line","children":[["$","span","949",{"style":{"color":"#24292E"},"children":["})"]}]]}],"\n",["$","span","951",{"className":"line","children":[]}],"\n",["$","span","964",{"className":"line","children":[["$","span","952",{"style":{"color":"#D73A49"},"children":["<"]}],["$","span","953",{"style":{"color":"#24292E"},"children":["div className"]}],["$","span","954",{"style":{"color":"#D73A49"},"children":["="]}],["$","span","955",{"style":{"color":"#24292E"},"children":["{"]}],["$","span","956",{"style":{"color":"#6F42C1"},"children":["styles"]}],["$","span","957",{"style":{"color":"#24292E"},"children":["("]}],["$","span","958",{"style":{"color":"#032F62"},"children":["'main'"]}],["$","span","959",{"style":{"color":"#24292E"},"children":[")}"]}],["$","span","960",{"style":{"color":"#D73A49"},"children":[">"]}],["$","span","961",{"style":{"color":"#24292E"},"children":["</"]}],["$","span","962",{"style":{"color":"#6F42C1"},"children":["div"]}],["$","span","963",{"style":{"color":"#24292E"},"children":[">"]}]]}]]}]]}],"\n",["$","p","967",{"children":["需要先过 swc 将代码转成"]}],"\n",["$","pre","1000",{"className":"shiki github-light","style":{"backgroundColor":"#fff","color":"#24292e"},"tabindex":"0","children":[["$","code","999",{"className":"language-typescript","children":[["$","span","974",{"className":"line","children":[["$","span","968",{"style":{"color":"#D73A49"},"children":["const"]}],["$","span","969",{"style":{"color":"#005CC5"},"children":[" styles"]}],["$","span","970",{"style":{"color":"#D73A49"},"children":[" ="]}],["$","span","971",{"style":{"color":"#24292E"},"children":[" style9."]}],["$","span","972",{"style":{"color":"#6F42C1"},"children":["create"]}],["$","span","973",{"style":{"color":"#24292E"},"children":["({"]}]]}],"\n",["$","span","982",{"className":"line","children":[["$","span","975",{"style":{"color":"#24292E"},"children":["    main: { marginLeft: "]}],["$","span","976",{"style":{"color":"#032F62"},"children":["'auto'"]}],["$","span","977",{"style":{"color":"#24292E"},"children":[", marginRight: "]}],["$","span","978",{"style":{"color":"#032F62"},"children":["'auto'"]}],["$","span","979",{"style":{"color":"#24292E"},"children":[", maxWidth: "]}],["$","span","980",{"style":{"color":"#032F62"},"children":["'65ch'"]}],["$","span","981",{"style":{"color":"#24292E"},"children":[" }"]}]]}],"\n",["$","span","984",{"className":"line","children":[["$","span","983",{"style":{"color":"#24292E"},"children":["})"]}]]}],"\n",["$","span","985",{"className":"line","children":[]}],"\n",["$","span","998",{"className":"line","children":[["$","span","986",{"style":{"color":"#D73A49"},"children":["<"]}],["$","span","987",{"style":{"color":"#24292E"},"children":["div className"]}],["$","span","988",{"style":{"color":"#D73A49"},"children":["="]}],["$","span","989",{"style":{"color":"#24292E"},"children":["{"]}],["$","span","990",{"style":{"color":"#6F42C1"},"children":["styles"]}],["$","span","991",{"style":{"color":"#24292E"},"children":["("]}],["$","span","992",{"style":{"color":"#032F62"},"children":["'main'"]}],["$","span","993",{"style":{"color":"#24292E"},"children":[")}"]}],["$","span","994",{"style":{"color":"#D73A49"},"children":[">"]}],["$","span","995",{"style":{"color":"#24292E"},"children":["</"]}],["$","span","996",{"style":{"color":"#6F42C1"},"children":["div"]}],["$","span","997",{"style":{"color":"#24292E"},"children":[">"]}]]}]]}]]}],"\n",["$","p","1001",{"children":["再给到 style9。这里涉及到先后问题，style9-webpack 提供的 webpack 配置把 babel 的 loader 放在前面，需要 patch 来改个顺序。"]}],"\n",["$","p","1005",{"children":["Tailwind 中除了单个的 CSS Utilities 还有”component“，类似 bluma 那样单个类名带很多样式的传统 CSS 库。它的 typography 插件就提供了一套富文本内容的样式，默认通过 class ",["$","code","1002",{"children":["prose"]}],"引入。这个对我来说是非常实用，毕竟写一套这样的样式很容易有遗漏的情况。而且对我来说，很容易就陷入整体观感上不好，但是不知道具体哪奇怪怎么改的情况。style9 ","$L20","，不支持任意带 nested selector，所以并不支持用 prose。最后我保留了 Tailwind 并将 Tailwnd 配置的",["$","code","1004",{"children":["@tailwind utilities;"]}],"删去，只用它的 base 和 component。utilities 部分给 stailwc 和 style9 生成。"]}],"\n",["$","p","1008",{"children":["迁移完成后，发现 ",["$","code","1006",{"children":["incrementalClassnames"]}]," 配置开启后，带缓存的 build 会出现 CSS 声明互相串的问题，所以没有打开。首页的 HTML 反而大了 1 ～ 2KB，但 CSS 文件大小了不少。=_=→",["$","br","1007",{}],"\n仅仅是把 utilities 部分用 stlye9 重写就能小那么多是出乎我意料的。"]}],"\n",["$","p","1010",{"children":[["$","$La",null,{"className":"m-img","id":"$undefined","alt":"tailwind","style":"$undefined","loading":"lazy","src":"https://vip2.loli.io/2023/03/11/sI4YOyaNtZEwlHf.png","width":1618,"height":546,"placeholder":"blur","blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAACCAIAAAAfCIEKAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAK0lEQVR4nAEgAN//AGVlZmtqX1pWSN/f4bm5twDV1tqFgmoqKRPk5OjY2NcCjhG4K5b2LgAAAABJRU5ErkJggg=="}]]}],"\n",["$","p","1012",{"children":["迁移到 Next.js 可以让博客有更加现代化的",["$","strong","1011",{"children":["开发"]}],"和用户体验，在过程中体验了一把 Next.js 13 的部分新功能。虽说用到 Server Component 但是本质上网站还是个静态站，还是希望能够静态部署。目前为止用了 Cloudflare Pages 还无法部署成功。期待 next export 的功能在 app dir 中实现～"]}],"\n"]}]
15:["$","a",null,{"href":"https://blog.skk.moe/post/use-nextjs-and-hexo-to-rebuild-my-blog","children":["sukka 用 Next.js 重构博客的文章"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
16:["$","a",null,{"href":"https://beta.nextjs.org/docs/rendering/fundamentals","children":["React Server Component 支持"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
19:["$","a",null,{"href":"https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#zero-bundle-size-components","children":["减少 client bundle size"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1a:["$","a",null,{"href":"https://github.com/reactwg/react-18/discussions/46#discussioncomment-846714","children":["hydrate"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1b:["$","a",null,{"href":"https://twitter.com/dan_abramov/status/1631646794059743232","children":["特殊格式"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1c:["$","a",null,{"href":"https://next-rsc-notes.vercel.app/","children":["在这个例子中"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1d:["$","a",null,{"href":"https://github.com/joe-bell/plaiceholder","children":["plaiceholder"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1e:["$","a",null,{"href":"https://github.com/SukkaW/style9-webpack","children":["style9-webpack"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
1f:["$","a",null,{"href":"https://github.com/arlyon/stailwc","children":["stailwc"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]
20:["$","a",null,{"href":"https://github.com/johanholmerin/style9/issues/46","children":["API 设计上鼓励写原子化 style"],"target":"_blank","rel":"noopener noreferrer external nofollow"}]