[{"data":1,"prerenderedAt":1423},["ShallowReactive",2],{"blog-next-js-13":3},{"id":4,"title":5,"body":6,"date":1413,"description":1414,"extension":1415,"meta":1416,"navigation":676,"path":1417,"seo":1418,"stem":1419,"tags":1420,"__hash__":1422},"blog\u002Fblog\u002Fnext-js-13.md","NextJS 13",{"type":7,"value":8,"toc":1408},"minimark",[9,16,49,54,95,112,115,470,486,489,520,523,567,590,594,617,780,808,811,877,886,1027,1045,1207,1211,1235,1297,1314,1374,1399,1404],[10,11,12],"blockquote",{},[13,14,15],"p",{},"Dynamic without limit",[13,17,18,25,26,31,32,36,37,40,41,44,45,48],{},[19,20,24],"a",{"href":21,"rel":22},"https:\u002F\u002Fvercel.com",[23],"nofollow","Vercel"," telah merilis NextJS versi 13 pada saat konferensi ",[19,27,30],{"href":28,"rel":29},"https:\u002F\u002Fnextjs.org\u002Fconf",[23],"Next.js Conf"," di San Francisco, 25 Oktober 2022. Beberapa update yang menarik diantaranya ",[33,34,35],"code",{},"app"," directory, perubahan ",[33,38,39],{},"data fetching",", ",[33,42,43],{},"server"," dan ",[33,46,47],{},"client"," components, serta hal lainnya. Namun NextJS versi 12 masih bisa digunakan dan setidaknya kita tidak perlu me-rewrite 10k+ baris code untuk sementara waktu.",[50,51,53],"h2",{"id":52},"routing","Routing",[13,55,56,57,62,63,67,68,71,72,75,76,79,80,83,84,86,87,90,91,94],{},"Untuk dokumentasi bisa dibaca di ",[19,58,61],{"href":59,"rel":60},"https:\u002F\u002Fbeta.nextjs.org\u002Fdocs\u002Frouting\u002Ffundamentals",[23],"Routing Fundamentals",". Di NextJS 12 kita mendefinisikan ",[64,65,66],"em",{},"route"," di ",[33,69,70],{},"pages"," directory. Halaman ",[33,73,74],{},"index.js"," sudah menjadi ",[33,77,78],{},"\u002F"," atau root. Jika ingin membuat route, contoh: ",[33,81,82],{},"\u002Fabout","; kita hanya perlu membuat file baru di ",[33,85,70],{}," dengan nama file ",[33,88,89],{},"about.js"," dan diisi dengan ",[64,92,93],{},"components"," biasa.",[13,96,97,98,100,101,104,105,108,109,111],{},"NextJS 13, memperkenalkan ",[33,99,35],{}," directory, struktur baru yang membuat ",[64,102,103],{},"project"," lebih terorganisir. Alih-alih menggunakan ",[33,106,107],{},"page",", route kita berada di ",[33,110,35],{}," directory.",[13,113,114],{},"Saya akan menjelaskan fungsi ketiga file tersebut:",[116,117,118,277,382],"ul",{},[119,120,121,126,127,130,131,134,135,138,139],"li",{},[122,123,125],"h4",{"id":124},"headjs","head.js","Seperti namanya, file ini digunakan untuk mendefinisikan tag ",[33,128,129],{},"head"," html. Kita bisa memasukkan cdn, title, favico, meta, dan lain-lain dengan ",[64,132,133],{},"return"," harus react fragment ",[33,136,137],{},"\u003C\u002F>",". Isi file kurang lebih seperti ini.",[140,141,146],"pre",{"className":142,"code":143,"language":144,"meta":145,"style":145},"language-js shiki shiki-themes github-light github-dark","export default function head() {\n  return (\n    \u003C>\n      \u003Cmeta charSet=\"UTF-8\" \u002F>\n      \u003Clink rel=\"shortcut icon\" href=\"\u002Ficon.png\" type=\"image\u002Fx-icon\" \u002F>\n      \u003Ctitle>Posts\u003C\u002Ftitle>\n    \u003C\u002F>\n  );\n}\n","js","",[33,147,148,171,180,186,209,243,259,265,271],{"__ignoreMap":145},[149,150,153,157,160,163,167],"span",{"class":151,"line":152},"line",1,[149,154,156],{"class":155},"szBVR","export",[149,158,159],{"class":155}," default",[149,161,162],{"class":155}," function",[149,164,166],{"class":165},"sScJk"," head",[149,168,170],{"class":169},"sVt8B","() {\n",[149,172,174,177],{"class":151,"line":173},2,[149,175,176],{"class":155},"  return",[149,178,179],{"class":169}," (\n",[149,181,183],{"class":151,"line":182},3,[149,184,185],{"class":169},"    \u003C>\n",[149,187,189,192,196,199,202,206],{"class":151,"line":188},4,[149,190,191],{"class":169},"      \u003C",[149,193,195],{"class":194},"s9eBZ","meta",[149,197,198],{"class":165}," charSet",[149,200,201],{"class":155},"=",[149,203,205],{"class":204},"sZZnC","\"UTF-8\"",[149,207,208],{"class":169}," \u002F>\n",[149,210,212,214,217,220,222,225,228,230,233,236,238,241],{"class":151,"line":211},5,[149,213,191],{"class":169},[149,215,216],{"class":194},"link",[149,218,219],{"class":165}," rel",[149,221,201],{"class":155},[149,223,224],{"class":204},"\"shortcut icon\"",[149,226,227],{"class":165}," href",[149,229,201],{"class":155},[149,231,232],{"class":204},"\"\u002Ficon.png\"",[149,234,235],{"class":165}," type",[149,237,201],{"class":155},[149,239,240],{"class":204},"\"image\u002Fx-icon\"",[149,242,208],{"class":169},[149,244,246,248,251,254,256],{"class":151,"line":245},6,[149,247,191],{"class":169},[149,249,250],{"class":194},"title",[149,252,253],{"class":169},">Posts\u003C\u002F",[149,255,250],{"class":194},[149,257,258],{"class":169},">\n",[149,260,262],{"class":151,"line":261},7,[149,263,264],{"class":169},"    \u003C\u002F>\n",[149,266,268],{"class":151,"line":267},8,[149,269,270],{"class":169},"  );\n",[149,272,274],{"class":151,"line":273},9,[149,275,276],{"class":169},"}\n",[119,278,279,283,284,286,287,289,290,293,294,296,297,300,301],{},[122,280,282],{"id":281},"layoutjs","layout.js","Pada ",[33,285,35],{}," directory, kita wajib membuat file ",[33,288,282],{}," sebagai root dari ",[64,291,292],{},"react components",". Berisi tag html dan body sebagai tempat ",[64,295,93],{}," akan di-",[64,298,299],{},"mount"," nanti.",[140,302,304],{"className":142,"code":303,"language":144,"meta":145,"style":145},"export default function RootLayout({ children }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n",[33,305,306,327,333,351,365,374,378],{"__ignoreMap":145},[149,307,308,310,312,314,317,320,324],{"class":151,"line":152},[149,309,156],{"class":155},[149,311,159],{"class":155},[149,313,162],{"class":155},[149,315,316],{"class":165}," RootLayout",[149,318,319],{"class":169},"({ ",[149,321,323],{"class":322},"s4XuR","children",[149,325,326],{"class":169}," }) {\n",[149,328,329,331],{"class":151,"line":173},[149,330,176],{"class":155},[149,332,179],{"class":169},[149,334,335,338,341,344,346,349],{"class":151,"line":182},[149,336,337],{"class":169},"    \u003C",[149,339,340],{"class":194},"html",[149,342,343],{"class":165}," lang",[149,345,201],{"class":155},[149,347,348],{"class":204},"\"en\"",[149,350,258],{"class":169},[149,352,353,355,358,361,363],{"class":151,"line":188},[149,354,191],{"class":169},[149,356,357],{"class":194},"body",[149,359,360],{"class":169},">{children}\u003C\u002F",[149,362,357],{"class":194},[149,364,258],{"class":169},[149,366,367,370,372],{"class":151,"line":211},[149,368,369],{"class":169},"    \u003C\u002F",[149,371,340],{"class":194},[149,373,258],{"class":169},[149,375,376],{"class":151,"line":245},[149,377,270],{"class":169},[149,379,380],{"class":151,"line":261},[149,381,276],{"class":169},[119,383,384,388,389,392,393,396,397,392,400,403,404,406,407],{},[122,385,387],{"id":386},"pagejs","page.js","File yang berisi ",[33,390,391],{},"jsx"," atau ",[64,394,395],{},"react component",". Jika kita punya halaman ",[64,398,399],{},"landing page",[64,401,402],{},"about page"," maka di sini-lah tempat kita menuliskan ",[33,405,340],{},".",[140,408,410],{"className":142,"code":409,"language":144,"meta":145,"style":145},"export default function page() {\n  return (\n    \u003Cdiv>\n      \u003Ch1>Hello World\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  );\n}\n",[33,411,412,425,431,440,454,462,466],{"__ignoreMap":145},[149,413,414,416,418,420,423],{"class":151,"line":152},[149,415,156],{"class":155},[149,417,159],{"class":155},[149,419,162],{"class":155},[149,421,422],{"class":165}," page",[149,424,170],{"class":169},[149,426,427,429],{"class":151,"line":173},[149,428,176],{"class":155},[149,430,179],{"class":169},[149,432,433,435,438],{"class":151,"line":182},[149,434,337],{"class":169},[149,436,437],{"class":194},"div",[149,439,258],{"class":169},[149,441,442,444,447,450,452],{"class":151,"line":188},[149,443,191],{"class":169},[149,445,446],{"class":194},"h1",[149,448,449],{"class":169},">Hello World\u003C\u002F",[149,451,446],{"class":194},[149,453,258],{"class":169},[149,455,456,458,460],{"class":151,"line":211},[149,457,369],{"class":169},[149,459,437],{"class":194},[149,461,258],{"class":169},[149,463,464],{"class":151,"line":245},[149,465,270],{"class":169},[149,467,468],{"class":151,"line":261},[149,469,276],{"class":169},[13,471,472,473,476,477,44,479,481,482,485],{},"Bagaimana dengan ",[64,474,475],{},"nested route","? mari lihat perbandingan ",[33,478,70],{},[33,480,35],{}," dengan studi kasus kita membuat route ",[33,483,484],{},"\u002Fproducts\u002F{id}",". {id} karena akan berisi id yang berbeda tiap produk.",[13,487,488],{},"NextJS 12:",[140,490,492],{"className":142,"code":491,"language":144,"meta":145,"style":145},"\u002F\u002F 12\npages\n├── index.js\n└── products\n    └── [id].js\n",[33,493,494,500,505,510,515],{"__ignoreMap":145},[149,495,496],{"class":151,"line":152},[149,497,499],{"class":498},"sJ8bj","\u002F\u002F 12\n",[149,501,502],{"class":151,"line":173},[149,503,504],{"class":169},"pages\n",[149,506,507],{"class":151,"line":182},[149,508,509],{"class":169},"├── index.js\n",[149,511,512],{"class":151,"line":188},[149,513,514],{"class":169},"└── products\n",[149,516,517],{"class":151,"line":211},[149,518,519],{"class":169},"    └── [id].js\n",[13,521,522],{},"NextJS 13:",[140,524,526],{"className":142,"code":525,"language":144,"meta":145,"style":145},"\u002F\u002F 13\napp\n├── head.js\n├── layout.js\n├── page.js\n└── products\n    └── [id]\n        └── page.js\n",[33,527,528,533,538,543,548,553,557,562],{"__ignoreMap":145},[149,529,530],{"class":151,"line":152},[149,531,532],{"class":498},"\u002F\u002F 13\n",[149,534,535],{"class":151,"line":173},[149,536,537],{"class":169},"app\n",[149,539,540],{"class":151,"line":182},[149,541,542],{"class":169},"├── head.js\n",[149,544,545],{"class":151,"line":188},[149,546,547],{"class":169},"├── layout.js\n",[149,549,550],{"class":151,"line":211},[149,551,552],{"class":169},"├── page.js\n",[149,554,555],{"class":151,"line":245},[149,556,514],{"class":169},[149,558,559],{"class":151,"line":261},[149,560,561],{"class":169},"    └── [id]\n",[149,563,564],{"class":151,"line":267},[149,565,566],{"class":169},"        └── page.js\n",[13,568,569,570,572,573,576,577,44,580,576,583,586,587,406],{},"Ada beberapa keuntungan ",[33,571,35],{}," seperti kita bisa melakukan ",[64,574,575],{},"Loading UI"," ",[33,578,579],{},"loading.js",[64,581,582],{},"Error Handling",[33,584,585],{},"error.js",". Selengkapnya bisa dibaca di ",[19,588,61],{"href":59,"rel":589},[23],[50,591,593],{"id":592},"data-fetching","Data Fetching",[13,595,596,599,600,603,604,607,608,406],{},[33,597,598],{},"fetching data"," di NextJS 13 sangat sederhana kita hanya perlu membuat ",[33,601,602],{},"function"," lalu memanggilnya langsung seperti ",[64,605,606],{},"native",". Namun, sebelumnya kita perlu paham tentang ",[19,609,612,44,614,616],{"href":610,"rel":611},"https:\u002F\u002Fbeta.nextjs.org\u002Fdocs\u002Frendering\u002Ffundamentals",[23],[33,613,47],{},[33,615,43],{}," components",[140,618,620],{"className":142,"code":619,"language":144,"meta":145,"style":145},"async function fetchData() {\n  const options = {\n    cache: 'force-cache', \u002F\u002F default\n          \u002F\u002F 'no-store'\n  }\n\n  const res = await fetch('https:\u002F\u002F...', options);\n  return res.json();\n}\n\nasync function page() {\n  const data = await fetchData();\n  return (\n    {\u002F*processing data*\u002F}\n  )\n}\n",[33,621,622,634,649,662,667,672,678,702,715,719,724,735,751,758,769,775],{"__ignoreMap":145},[149,623,624,627,629,632],{"class":151,"line":152},[149,625,626],{"class":155},"async",[149,628,162],{"class":155},[149,630,631],{"class":165}," fetchData",[149,633,170],{"class":169},[149,635,636,639,643,646],{"class":151,"line":173},[149,637,638],{"class":155},"  const",[149,640,642],{"class":641},"sj4cs"," options",[149,644,645],{"class":155}," =",[149,647,648],{"class":169}," {\n",[149,650,651,654,657,659],{"class":151,"line":182},[149,652,653],{"class":169},"    cache: ",[149,655,656],{"class":204},"'force-cache'",[149,658,40],{"class":169},[149,660,661],{"class":498},"\u002F\u002F default\n",[149,663,664],{"class":151,"line":188},[149,665,666],{"class":498},"          \u002F\u002F 'no-store'\n",[149,668,669],{"class":151,"line":211},[149,670,671],{"class":169},"  }\n",[149,673,674],{"class":151,"line":245},[149,675,677],{"emptyLinePlaceholder":676},true,"\n",[149,679,680,682,685,687,690,693,696,699],{"class":151,"line":261},[149,681,638],{"class":155},[149,683,684],{"class":641}," res",[149,686,645],{"class":155},[149,688,689],{"class":155}," await",[149,691,692],{"class":165}," fetch",[149,694,695],{"class":169},"(",[149,697,698],{"class":204},"'https:\u002F\u002F...'",[149,700,701],{"class":169},", options);\n",[149,703,704,706,709,712],{"class":151,"line":267},[149,705,176],{"class":155},[149,707,708],{"class":169}," res.",[149,710,711],{"class":165},"json",[149,713,714],{"class":169},"();\n",[149,716,717],{"class":151,"line":273},[149,718,276],{"class":169},[149,720,722],{"class":151,"line":721},10,[149,723,677],{"emptyLinePlaceholder":676},[149,725,727,729,731,733],{"class":151,"line":726},11,[149,728,626],{"class":155},[149,730,162],{"class":155},[149,732,422],{"class":165},[149,734,170],{"class":169},[149,736,738,740,743,745,747,749],{"class":151,"line":737},12,[149,739,638],{"class":155},[149,741,742],{"class":641}," data",[149,744,645],{"class":155},[149,746,689],{"class":155},[149,748,631],{"class":165},[149,750,714],{"class":169},[149,752,754,756],{"class":151,"line":753},13,[149,755,176],{"class":155},[149,757,179],{"class":169},[149,759,761,764,767],{"class":151,"line":760},14,[149,762,763],{"class":169},"    {",[149,765,766],{"class":498},"\u002F*processing data*\u002F",[149,768,276],{"class":169},[149,770,772],{"class":151,"line":771},15,[149,773,774],{"class":169},"  )\n",[149,776,778],{"class":151,"line":777},16,[149,779,276],{"class":169},[116,781,782,795],{},[119,783,784,787,788,791,792,406],{},[33,785,786],{},"force-cache"," hanya akan dijalankan ketika di-",[64,789,790],{},"build"," atau mekanisme ini mirip seperti ",[33,793,794],{},"getStaticProps",[119,796,797,800,801,804,805,406],{},[33,798,799],{},"no-store"," dijalankan setiap ",[64,802,803],{},"request",". mirip seperti ",[33,806,807],{},"getServerSideProps",[13,809,810],{},"ada 1 lagi, yaitu:",[116,812,813],{},[119,814,815,818,819,44,822,825,826,829,830,832,833,835,836,838,839,406,842],{},[33,816,817],{},"revalidate",". Kombinasi ",[33,820,821],{},"SSG",[33,823,824],{},"SSR",", ketika kita ingin ",[33,827,828],{},"fetch"," saat ",[64,831,790],{}," dan pada kondisi tertentu halaman akan re ",[33,834,828],{}," pada proses request ",[33,837,824],{},", bukan di client ",[33,840,841],{},"CSR",[140,843,845],{"className":142,"code":844,"language":144,"meta":145,"style":145},"const options = {\n  next: { revalidate: 10 }, \u002F\u002F pada SSR akan refetch setiap 10 detik\n};\n",[33,846,847,858,872],{"__ignoreMap":145},[149,848,849,852,854,856],{"class":151,"line":152},[149,850,851],{"class":155},"const",[149,853,642],{"class":641},[149,855,645],{"class":155},[149,857,648],{"class":169},[149,859,860,863,866,869],{"class":151,"line":173},[149,861,862],{"class":169},"  next: { revalidate: ",[149,864,865],{"class":641},"10",[149,867,868],{"class":169}," }, ",[149,870,871],{"class":498},"\u002F\u002F pada SSR akan refetch setiap 10 detik\n",[149,873,874],{"class":151,"line":182},[149,875,876],{"class":169},"};\n",[13,878,879,880,882,883,885],{},"Dikarenakan ",[33,881,387],{}," adalah ",[33,884,43],{}," component by default, jadi kita bisa mengakses langsung database.",[140,887,889],{"className":142,"code":888,"language":144,"meta":145,"style":145},"export const revalidate = 3600; \u002F\u002F jika ingin revalidate\n\nasync function getAllUsers() {\n  const user: User[] = await primsa.user.findMany();\n  return user;\n}\n\nasync function page() {\n  const users: User[] = await getAllUsers();\n\n  return (\n    {\u002F*processing data*\u002F}\n  )\n}\n",[33,890,891,912,916,927,955,962,966,970,980,1001,1005,1011,1019,1023],{"__ignoreMap":145},[149,892,893,895,898,901,903,906,909],{"class":151,"line":152},[149,894,156],{"class":155},[149,896,897],{"class":155}," const",[149,899,900],{"class":641}," revalidate",[149,902,645],{"class":155},[149,904,905],{"class":641}," 3600",[149,907,908],{"class":169},"; ",[149,910,911],{"class":498},"\u002F\u002F jika ingin revalidate\n",[149,913,914],{"class":151,"line":173},[149,915,677],{"emptyLinePlaceholder":676},[149,917,918,920,922,925],{"class":151,"line":182},[149,919,626],{"class":155},[149,921,162],{"class":155},[149,923,924],{"class":165}," getAllUsers",[149,926,170],{"class":169},[149,928,929,931,934,937,940,943,945,947,950,953],{"class":151,"line":188},[149,930,638],{"class":155},[149,932,933],{"class":641}," user",[149,935,936],{"class":155},":",[149,938,939],{"class":165}," User",[149,941,942],{"class":169},"[] ",[149,944,201],{"class":155},[149,946,689],{"class":155},[149,948,949],{"class":169}," primsa.user.",[149,951,952],{"class":165},"findMany",[149,954,714],{"class":169},[149,956,957,959],{"class":151,"line":211},[149,958,176],{"class":155},[149,960,961],{"class":169}," user;\n",[149,963,964],{"class":151,"line":245},[149,965,276],{"class":169},[149,967,968],{"class":151,"line":261},[149,969,677],{"emptyLinePlaceholder":676},[149,971,972,974,976,978],{"class":151,"line":267},[149,973,626],{"class":155},[149,975,162],{"class":155},[149,977,422],{"class":165},[149,979,170],{"class":169},[149,981,982,984,987,989,991,993,995,997,999],{"class":151,"line":273},[149,983,638],{"class":155},[149,985,986],{"class":641}," users",[149,988,936],{"class":155},[149,990,939],{"class":165},[149,992,942],{"class":169},[149,994,201],{"class":155},[149,996,689],{"class":155},[149,998,924],{"class":165},[149,1000,714],{"class":169},[149,1002,1003],{"class":151,"line":721},[149,1004,677],{"emptyLinePlaceholder":676},[149,1006,1007,1009],{"class":151,"line":726},[149,1008,176],{"class":155},[149,1010,179],{"class":169},[149,1012,1013,1015,1017],{"class":151,"line":737},[149,1014,763],{"class":169},[149,1016,766],{"class":498},[149,1018,276],{"class":169},[149,1020,1021],{"class":151,"line":753},[149,1022,774],{"class":169},[149,1024,1025],{"class":151,"line":760},[149,1026,276],{"class":169},[13,1028,1029,1030,1033,1034,1037,1038,1041,1042,406],{},"Jika kita mempunyai ",[33,1031,1032],{},"dynamic"," route dan ingin men-",[64,1035,1036],{},"generate"," HTML ketika di build, kita bisa menggunakan ",[33,1039,1040],{},"generateStaticParams",". Di versi sebelumnya, proses ini mirip seperti ",[33,1043,1044],{},"getStaticPaths",[140,1046,1048],{"className":142,"code":1047,"language":144,"meta":145,"style":145},"\u002F\u002F app\u002Fblog\u002F[articleSlug]\u002Fpage.js\nexport default function Page({ params }) {\n  const { articleSlug } = params;\n\n  return ...\n}\n\nexport async function generateStaticParams() {\n  const posts: Post[] = await getPosts();\n\n  const params  = posts.map((post) => ({\n    articleSlug: post.slug,\n  }));\n\n  return params\n}\n",[33,1049,1050,1055,1073,1091,1095,1102,1106,1110,1124,1147,1151,1182,1187,1192,1196,1203],{"__ignoreMap":145},[149,1051,1052],{"class":151,"line":152},[149,1053,1054],{"class":498},"\u002F\u002F app\u002Fblog\u002F[articleSlug]\u002Fpage.js\n",[149,1056,1057,1059,1061,1063,1066,1068,1071],{"class":151,"line":173},[149,1058,156],{"class":155},[149,1060,159],{"class":155},[149,1062,162],{"class":155},[149,1064,1065],{"class":165}," Page",[149,1067,319],{"class":169},[149,1069,1070],{"class":322},"params",[149,1072,326],{"class":169},[149,1074,1075,1077,1080,1083,1086,1088],{"class":151,"line":182},[149,1076,638],{"class":155},[149,1078,1079],{"class":169}," { ",[149,1081,1082],{"class":641},"articleSlug",[149,1084,1085],{"class":169}," } ",[149,1087,201],{"class":155},[149,1089,1090],{"class":169}," params;\n",[149,1092,1093],{"class":151,"line":188},[149,1094,677],{"emptyLinePlaceholder":676},[149,1096,1097,1099],{"class":151,"line":211},[149,1098,176],{"class":155},[149,1100,1101],{"class":155}," ...\n",[149,1103,1104],{"class":151,"line":245},[149,1105,276],{"class":169},[149,1107,1108],{"class":151,"line":261},[149,1109,677],{"emptyLinePlaceholder":676},[149,1111,1112,1114,1117,1119,1122],{"class":151,"line":267},[149,1113,156],{"class":155},[149,1115,1116],{"class":155}," async",[149,1118,162],{"class":155},[149,1120,1121],{"class":165}," generateStaticParams",[149,1123,170],{"class":169},[149,1125,1126,1128,1131,1133,1136,1138,1140,1142,1145],{"class":151,"line":273},[149,1127,638],{"class":155},[149,1129,1130],{"class":641}," posts",[149,1132,936],{"class":155},[149,1134,1135],{"class":165}," Post",[149,1137,942],{"class":169},[149,1139,201],{"class":155},[149,1141,689],{"class":155},[149,1143,1144],{"class":165}," getPosts",[149,1146,714],{"class":169},[149,1148,1149],{"class":151,"line":721},[149,1150,677],{"emptyLinePlaceholder":676},[149,1152,1153,1155,1158,1161,1164,1167,1170,1173,1176,1179],{"class":151,"line":726},[149,1154,638],{"class":155},[149,1156,1157],{"class":641}," params",[149,1159,1160],{"class":155},"  =",[149,1162,1163],{"class":169}," posts.",[149,1165,1166],{"class":165},"map",[149,1168,1169],{"class":169},"((",[149,1171,1172],{"class":322},"post",[149,1174,1175],{"class":169},") ",[149,1177,1178],{"class":155},"=>",[149,1180,1181],{"class":169}," ({\n",[149,1183,1184],{"class":151,"line":737},[149,1185,1186],{"class":169},"    articleSlug: post.slug,\n",[149,1188,1189],{"class":151,"line":753},[149,1190,1191],{"class":169},"  }));\n",[149,1193,1194],{"class":151,"line":760},[149,1195,677],{"emptyLinePlaceholder":676},[149,1197,1198,1200],{"class":151,"line":771},[149,1199,176],{"class":155},[149,1201,1202],{"class":169}," params\n",[149,1204,1205],{"class":151,"line":777},[149,1206,276],{"class":169},[50,1208,1210],{"id":1209},"nextfont","@next\u002Ffont",[13,1212,1213,1214,40,1217,1220,1221,44,1224,1227,1228,1230,1231,406],{},"Font system baru NextJS memiliki banyak keuntungan, seperti optimasi, ",[64,1215,1216],{},"remove external request",[64,1218,1219],{},"self hosting font",", dan yang lainnya. Fitur yang saya suka kita bisa menggunakan Google Fonts dengan performa dan privasi. ",[64,1222,1223],{},"CSS",[64,1225,1226],{},"file font"," akan didownload ketika ",[64,1229,790],{},". ",[1232,1233,1234],"strong",{},"No requests are sent to Google by the browser",[140,1236,1238],{"className":142,"code":1237,"language":144,"meta":145,"style":145},"import { Roboto } from '@next\u002Ffont\u002Fgoogle';\nconst roboto = Roboto({ weight: '700' });\n\n\u003Ch1 className={roboto.className}>\n",[33,1239,1240,1257,1278,1282],{"__ignoreMap":145},[149,1241,1242,1245,1248,1251,1254],{"class":151,"line":152},[149,1243,1244],{"class":155},"import",[149,1246,1247],{"class":169}," { Roboto } ",[149,1249,1250],{"class":155},"from",[149,1252,1253],{"class":204}," '@next\u002Ffont\u002Fgoogle'",[149,1255,1256],{"class":169},";\n",[149,1258,1259,1261,1264,1266,1269,1272,1275],{"class":151,"line":173},[149,1260,851],{"class":155},[149,1262,1263],{"class":641}," roboto",[149,1265,645],{"class":155},[149,1267,1268],{"class":165}," Roboto",[149,1270,1271],{"class":169},"({ weight: ",[149,1273,1274],{"class":204},"'700'",[149,1276,1277],{"class":169}," });\n",[149,1279,1280],{"class":151,"line":182},[149,1281,677],{"emptyLinePlaceholder":676},[149,1283,1284,1287,1289,1292,1294],{"class":151,"line":188},[149,1285,1286],{"class":169},"\u003C",[149,1288,446],{"class":194},[149,1290,1291],{"class":165}," className",[149,1293,201],{"class":155},[149,1295,1296],{"class":169},"{roboto.className}>\n",[13,1298,1299,1300,1303,1304,40,1307,1310,1311,406],{},"Atau jika kita ada ",[64,1301,1302],{},"custom fonts",", NextJS sudah mensuport ",[64,1305,1306],{},"self hosting",[64,1308,1309],{},"caching",", dan ",[64,1312,1313],{},"preloading font files",[140,1315,1317],{"className":142,"code":1316,"language":144,"meta":145,"style":145},"import localFont from '@next\u002Ffont\u002Flocal';\n\nconst aksara = localFont({ src: '.\u002Faksara.woff2' });\n\n\u003Chtml className={aksara.className}>\n",[33,1318,1319,1333,1337,1357,1361],{"__ignoreMap":145},[149,1320,1321,1323,1326,1328,1331],{"class":151,"line":152},[149,1322,1244],{"class":155},[149,1324,1325],{"class":169}," localFont ",[149,1327,1250],{"class":155},[149,1329,1330],{"class":204}," '@next\u002Ffont\u002Flocal'",[149,1332,1256],{"class":169},[149,1334,1335],{"class":151,"line":173},[149,1336,677],{"emptyLinePlaceholder":676},[149,1338,1339,1341,1344,1346,1349,1352,1355],{"class":151,"line":182},[149,1340,851],{"class":155},[149,1342,1343],{"class":641}," aksara",[149,1345,645],{"class":155},[149,1347,1348],{"class":165}," localFont",[149,1350,1351],{"class":169},"({ src: ",[149,1353,1354],{"class":204},"'.\u002Faksara.woff2'",[149,1356,1277],{"class":169},[149,1358,1359],{"class":151,"line":188},[149,1360,677],{"emptyLinePlaceholder":676},[149,1362,1363,1365,1367,1369,1371],{"class":151,"line":211},[149,1364,1286],{"class":169},[149,1366,340],{"class":194},[149,1368,1291],{"class":165},[149,1370,201],{"class":155},[149,1372,1373],{"class":169},"{aksara.className}>\n",[13,1375,1376,1377,1382,1383,1386,1387,1390,1391,1394,1395,1398],{},"Masih banyak lagi tentang update Next JS yang bisa dilihat langsung ke ",[19,1378,1381],{"href":1379,"rel":1380},"https:\u002F\u002Fbeta.nextjs.org",[23],"Dokumentasi resmi"," yang saat artikel ini ditulis masih ",[64,1384,1385],{},"beta version",". Seluruh fitur di sini masih ",[64,1388,1389],{},"beta",", jadi beberapa tidak direkomendasikan ke ",[64,1392,1393],{},"production",". Fitur di versi sebelumnya masih bisa digunakan bersamaan dengan ",[64,1396,1397],{},"experimental"," fitur terbaru.",[10,1400,1401],{},[13,1402,1403],{},"Six years ago, we released Next.js to the public. We set out to build a zero-configuration React framework that simplifies your developer experience. Looking back, it's incredible to see how the community has grown, and what we've been able to ship together. Let's keep going.",[1405,1406,1407],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":145,"searchDepth":173,"depth":173,"links":1409},[1410,1411,1412],{"id":52,"depth":173,"text":53},{"id":592,"depth":173,"text":593},{"id":1209,"depth":173,"text":1210},"2022-12-26","Beberapa Update tentang NextJS versi 13","md",{},"\u002Fblog\u002Fnext-js-13",{"title":5,"description":1414},"blog\u002Fnext-js-13",[1421],"NextJS","kpo973G_I3JAFAgbMzmVhsdRpFPhYacxyshotpV4A4Q",1781958637620]