{"id":1212,"date":"2025-07-16T07:43:19","date_gmt":"2025-07-16T07:43:19","guid":{"rendered":"https:\/\/digisiana.com\/blog\/?p=1212"},"modified":"2025-07-16T07:43:24","modified_gmt":"2025-07-16T07:43:24","slug":"cara-membuat-website-dengan-next-js","status":"publish","type":"post","link":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/","title":{"rendered":"Cara Membuat Website Dengan Next.js"},"content":{"rendered":"\n<p>Cara membuat website dengan Next.js, Di dunia pengembangan web yang bergerak cepat, memilih <em>framework<\/em>\u00a0yang tepat itu krusial. <\/p>\n\n\n\n<p>Jika kamu ingin membangun website yang cepat, punya performa tinggi, dan <em>scalable<\/em>, Next.js\u00a0adalah salah satu pilihan terbaik.<\/p>\n\n\n\n<p>Next.js adalah <em>framework<\/em>\u00a0React yang <em>powerfu<\/em>l, dirancang khusus untuk menciptakan aplikasi web modern dengan kemudahan <em>server-side rendering<\/em>\u00a0(SSR), <em>static site generation<\/em>\u00a0(SSG), dan banyak fitur canggih lainnya.<\/p>\n\n\n\n<p>Bagi para pengembang, atau bahkan kamu yang baru ingin terjun ke dunia <em>web development<\/em>, Next.js\u00a0menawarkan pengalaman pengembangan yang menyenangkan dan efisien. <\/p>\n\n\n\n<p>Ia mengurangi banyak <em>boilerplate<\/em>\u00a0(<em>code<\/em>\u00a0yang berulang) yang sering ditemukan di React murni, dan menyediakan struktur yang jelas untuk proyekmu. Jadi, mari kita pelajari cara membuat website dengan Next.js\u00a0dari nol!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Simak Juga : <a href=\"https:\/\/digisiana.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/p>\n<\/blockquote>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#Persiapan_Awal_Sebelum_Mulai_Ngoding_Nextjs\" >Persiapan Awal Sebelum Mulai Ngoding Next.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#1_Instalasi_Nodejs_dan_npmYarn\" >1. Instalasi Node.js dan npm\/Yarn<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#2_Pahami_Dasar-dasar_Reactjs_Opsional_tapi_Direkomendasikan\" >2. Pahami Dasar-dasar React.js (Opsional tapi Direkomendasikan)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#1_Inisialisasi_Proyek_Nextjs_Baru\" >1. Inisialisasi Proyek Next.js Baru<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#1_Buka_TerminalCommand_Prompt\" >1. Buka Terminal\/Command Prompt<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#2_Jalankan_Perintah_create-next-app\" >2. Jalankan Perintah create-next-app<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#3_Masuk_ke_Direktori_Proyek\" >3. Masuk ke Direktori Proyek<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#4_Jalankan_Server_Pengembangan\" >4. Jalankan Server Pengembangan<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#2_Memahami_Struktur_Proyek_Nextjs_App_Router\" >2. Memahami Struktur Proyek Next.js (App Router)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#3_Membuat_Halaman_Baru_dan_Navigasi\" >3. Membuat Halaman Baru dan Navigasi<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#1_Buat_Halaman_%E2%80%9CAbout_Us%E2%80%9D\" >1. Buat Halaman &#8220;About Us&#8221;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#2_Menambahkan_Navigasi_dengan\" >2. Menambahkan Navigasi dengan &lt;Link&gt;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#4_Menambahkan_Styling_CSS_pada_Website\" >4. Menambahkan Styling (CSS) pada Website<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#1_Global_CSS_appglobalcss\" >1. Global CSS (app\/global.css)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#2_CSS_Modules_Direkomendasikan\" >2. CSS Modules (Direkomendasikan)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#5_Deployment_Meluncurkan_Website_mu_ke_Dunia\" >5. Deployment Meluncurkan Website mu ke Dunia!<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#1_Build_Proyekmu\" >1. Build Proyekmu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#2_Deploy_ke_Vercel_Paling_Mudah\" >2. Deploy ke Vercel (Paling Mudah)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Persiapan_Awal_Sebelum_Mulai_Ngoding_Nextjs\"><\/span>Persiapan Awal Sebelum Mulai Ngoding Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum kita masuk ke bagian teknis cara membuat website dengan Next.js, ada beberapa hal yang perlu kamu siapkan di komputermu:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Instalasi_Nodejs_dan_npmYarn\"><\/span>1. Instalasi Node.js dan npm\/Yarn<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Next.js dibangun di atas Node.js, jadi kamu perlu menginstalnya terlebih dahulu. Node.js juga sudah termasuk npm&nbsp;(Node Package Manager). Atau, kamu bisa menggunakan Yarn&nbsp;sebagai alternatif. Pastikan versinya cukup baru (disarankan versi LTS).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js:\u00a0Kunjungi <a href=\"https:\/\/nodejs.org\/en\"><u>nodejs.org<\/u><\/a>\u00a0dan unduh versi LTS.<\/li>\n\n\n\n<li>npm\/Yarn:\u00a0Biasanya terinstal otomatis dengan Node.js (untuk npm). Jika ingin Yarn, kamu bisa instal dengan npm install -g yarn.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Pahami_Dasar-dasar_Reactjs_Opsional_tapi_Direkomendasikan\"><\/span>2. Pahami Dasar-dasar React.js (Opsional tapi Direkomendasikan)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Meskipun kamu bisa belajar Next.js tanpa menguasai React sepenuhnya, memiliki pemahaman dasar tentang komponen React, <em>props<\/em>, <em>state<\/em>, dan <em>JSX<\/em>&nbsp;akan sangat membantu. Next.js adalah <em>framework<\/em>&nbsp;di atas React, jadi konsep-konsepnya saling berkaitan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Inisialisasi_Proyek_Nextjs_Baru\"><\/span>1. Inisialisasi Proyek Next.js Baru<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Langkah pertama dalam cara membuat website dengan Next.js&nbsp;adalah membuat <em>boilerplate<\/em>&nbsp;proyek baru. Next.js menyediakan <em>tool<\/em>&nbsp;yang sangat mudah untuk ini: create-next-app.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Buka_TerminalCommand_Prompt\"><\/span>1. Buka Terminal\/Command Prompt<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Arahkan ke direktori di mana kamu ingin menyimpan proyekmu.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Jalankan_Perintah_create-next-app\"><\/span>2. Jalankan Perintah create-next-app<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Ketikkan perintah berikut:<\/p>\n\n\n\n<p>Bash<\/p>\n\n\n\n<p>npx create-next-app@latest nama-proyek-kamu# atau jika menggunakan yarn# yarn create next-app nama-proyek-kamu<\/p>\n\n\n\n<p><em>Ganti <\/em><em>nama-proyek-kamu<\/em><em>&nbsp;dengan nama yang kamu inginkan (misalnya, <\/em><em>my-nextjs-website<\/em><em>).<\/em><\/p>\n\n\n\n<p>Selama proses instalasi, kamu akan ditanyai beberapa konfigurasi. Biasanya, pilihan <em>default<\/em>&nbsp;sudah cukup bagus untuk pemula:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Would you like to use TypeScript?\u00a0(yes\/no)<\/li>\n\n\n\n<li>Would you like to use ESLint?\u00a0(yes\/no)<\/li>\n\n\n\n<li>Would you like to use Tailwind CSS?\u00a0(yes\/no)<\/li>\n\n\n\n<li>Would you like to use src\/\u00a0directory?\u00a0(yes\/no)<\/li>\n\n\n\n<li>Would you like to use App Router (recommended)?\u00a0(yes\/no)<\/li>\n\n\n\n<li>Would you like to customize the default import alias?\u00a0(yes\/no)<\/li>\n<\/ul>\n\n\n\n<p>Disarankan memilih yes&nbsp;untuk App Router karena ini adalah pendekatan terbaru dari Next.js.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Masuk_ke_Direktori_Proyek\"><\/span>3. Masuk ke Direktori Proyek<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Setelah instalasi selesai, masuk ke direktori proyek yang baru dibuat:<\/p>\n\n\n\n<p>Bash<\/p>\n\n\n\n<p>cd&nbsp;nama-proyek-kamu<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Jalankan_Server_Pengembangan\"><\/span>4. Jalankan Server Pengembangan<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Untuk melihat website-mu di <em>browser<\/em>, jalankan server pengembangan:<\/p>\n\n\n\n<p>Bash<\/p>\n\n\n\n<p>npm run dev# atau jika menggunakan yarn# yarn dev<\/p>\n\n\n\n<p>Biasanya, website akan terbuka di http:\/\/localhost:3000. Selamat! Kamu sudah berhasil membuat dan menjalankan website Next.js pertamamu!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Memahami_Struktur_Proyek_Nextjs_App_Router\"><\/span>2. Memahami Struktur Proyek Next.js (App Router)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Saat kamu membuka folder proyek di <em>code editor<\/em>&nbsp;(misalnya VS Code), kamu akan melihat struktur yang rapi. Memahami ini penting saat belajar cara membuat website dengan Next.js:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>app\/: Ini adalah direktori inti untuk App Router. Semua <em>route<\/em>\u00a0dan halaman website-mu akan ada di sini.<\/li>\n\n\n\n<li>layout.js\u00a0(atau .tsx):\u00a0Ini adalah <em>layout<\/em>\u00a0utama untuk aplikasi. Kamu bisa mendefinisikan <em>header<\/em>, <em>footer<\/em>, <em>sidebar<\/em>, dan komponen lain yang muncul di setiap halaman di sini.<\/li>\n\n\n\n<li>page.js\u00a0(atau .tsx):\u00a0Ini adalah file yang merepresentasikan sebuah halaman. Misalnya, app\/page.js\u00a0adalah halaman <em>homepage<\/em>\u00a0(\/). app\/about\/page.js\u00a0akan menjadi halaman \/about.<\/li>\n\n\n\n<li>loading.js:\u00a0File ini akan otomatis ditampilkan saat halaman sedang dalam proses <em>loading<\/em>.<\/li>\n\n\n\n<li>error.js:\u00a0File ini akan otomatis ditampilkan jika terjadi error pada halaman.<\/li>\n\n\n\n<li>global.css:\u00a0Untuk <em>styling<\/em>\u00a0global website-mu.<\/li>\n\n\n\n<li>public\/: Untuk aset statis seperti gambar, <em>favicon<\/em>, dan <em>fonts<\/em>.<\/li>\n\n\n\n<li>package.json: Berisi informasi proyek dan daftar <em>dependencies<\/em>\u00a0(paket yang dibutuhkan).<\/li>\n\n\n\n<li>next.config.js: File konfigurasi Next.js.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Membuat_Halaman_Baru_dan_Navigasi\"><\/span>3. Membuat Halaman Baru dan Navigasi <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sekarang, mari kita coba membuat halaman baru dan menghubungkannya:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Buat_Halaman_%E2%80%9CAbout_Us%E2%80%9D\"><\/span>1. Buat Halaman &#8220;About Us&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Di dalam folder app\/, buat folder baru bernama about. Di dalam folder about, buat file page.js&nbsp;(atau page.tsx).<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<p>\/\/ app\/about\/page.jsexport&nbsp;default&nbsp;function&nbsp;About() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;return&nbsp;(<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Tentang Kami&lt;\/h1&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Ini adalah halaman tentang kami. Kami sangat menyukai Next.js!&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Sekarang, jika kamu mengunjungi http:\/\/localhost:3000\/about, kamu akan melihat halaman &#8220;Tentang Kami&#8221; ini.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Menambahkan_Navigasi_dengan\"><\/span>2. Menambahkan Navigasi dengan &lt;Link&gt;<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Next.js menyediakan komponen &lt;Link&gt;&nbsp;untuk navigasi yang efisien tanpa me-refresh seluruh halaman (Client-side Navigation).<\/p>\n\n\n\n<p>Edit app\/page.js&nbsp;(halaman <em>homepage<\/em>):<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<p>\/\/ app\/page.jsimport&nbsp;Link from&nbsp;&#8216;next\/link&#8217;; \/\/ Import komponen Link<\/p>\n\n\n\n<p>export&nbsp;default&nbsp;function&nbsp;Home() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;return&nbsp;(<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Selamat Datang di Website Next.js Kami!&lt;\/h1&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Mulai perjalanan web modernmu di sini.&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Link&nbsp;href=&#8221;\/&#8221;&gt;Beranda&lt;\/Link&gt; | &lt;Link&nbsp;href=&#8221;\/about&#8221;&gt;Tentang Kami&lt;\/Link&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Sekarang, kamu bisa menavigasi antar halaman dengan mulus!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Menambahkan_Styling_CSS_pada_Website\"><\/span>4. Menambahkan Styling (CSS) pada Website <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Website tanpa <em>styling<\/em>&nbsp;tentu kurang menarik. Ada beberapa cara untuk menambahkan CSS saat belajar cara membuat website dengan Next.js:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Global_CSS_appglobalcss\"><\/span>1. Global CSS (app\/global.css)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Untuk <em>styling<\/em>&nbsp;yang berlaku di seluruh aplikasi. Kamu bisa menambahkan aturan CSS di app\/global.css.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_CSS_Modules_Direkomendasikan\"><\/span>2. CSS Modules (Direkomendasikan)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Ini adalah cara terbaik untuk mencegah konflik <em>styling<\/em>&nbsp;antar komponen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buat file CSS dengan ekstensi .module.css, misalnya nama-komponen.module.css.<\/li>\n\n\n\n<li>Import ke dalam komponenmu.<\/li>\n<\/ul>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>Buat file app\/home.module.css:<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>\/* app\/home.module.css *\/.title&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;color: blue;<\/p>\n\n\n\n<p>&nbsp;&nbsp;font-size: 3em;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.description&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;color: #333;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Lalu gunakan di app\/page.js:<\/p>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<p>\/\/ app\/page.jsimport&nbsp;Link from&nbsp;&#8216;next\/link&#8217;;import&nbsp;styles from&nbsp;&#8216;.\/home.module.css&#8217;; \/\/ Import CSS Module<\/p>\n\n\n\n<p>export&nbsp;default&nbsp;function&nbsp;Home() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;return&nbsp;(<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&nbsp;className={styles.title}&gt;Selamat Datang di Website Next.js Kami!&lt;\/h1&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;className={styles.description}&gt;Mulai perjalanan web modernmu di sini.&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Link&nbsp;href=&#8221;\/&#8221;&gt;Beranda&lt;\/Link&gt; | &lt;Link&nbsp;href=&#8221;\/about&#8221;&gt;Tentang Kami&lt;\/Link&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Perhatikan penggunaan className={styles.title}. Ini akan menghasilkan nama kelas CSS unik secara otomatis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Deployment_Meluncurkan_Website_mu_ke_Dunia\"><\/span>5. Deployment Meluncurkan Website mu ke Dunia! <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Setelah website-mu jadi, saatnya menampilkannya ke publik! Next.js memiliki dukungan <em>deployment<\/em>&nbsp;yang sangat mudah, terutama ke Vercel (tim di balik Next.js).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Build_Proyekmu\"><\/span>1. Build Proyekmu<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Jalankan perintah ini untuk membuat <em>build<\/em>&nbsp;produksi website-mu:<\/p>\n\n\n\n<p>Bash<\/p>\n\n\n\n<p>npm run build# atau jika menggunakan yarn# yarn build<\/p>\n\n\n\n<p>Ini akan membuat folder .next\/&nbsp;yang berisi semua file <em>optimized<\/em>&nbsp;untuk <em>deployment<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Deploy_ke_Vercel_Paling_Mudah\"><\/span>2. Deploy ke Vercel (Paling Mudah)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pastikan kamu sudah menginstal Vercel CLI: npm install -g vercel.<\/li>\n\n\n\n<li>Dari direktori proyekmu, jalankan perintah: vercel.<\/li>\n\n\n\n<li>Ikuti instruksi di terminal (login, tautkan ke proyek Git, dll.).<\/li>\n\n\n\n<li>Vercel akan otomatis mendeteksi proyek Next.js-mu dan men-deploy-nya. Kamu akan mendapatkan URL publik untuk website-mu!<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span>Kesimpulan <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js&nbsp;dari nol hingga <em>deployment<\/em>. Next.js adalah <em>framework<\/em>&nbsp;yang powerful dan akan sangat membantu kamu membangun aplikasi web modern dengan performa dan <em>developer experience<\/em>&nbsp;yang luar biasa. Ingat, ini hanyalah permulaan. Teruslah bereksperimen dengan fitur-fitur Next.js lainnya seperti <em>data fetching<\/em>&nbsp;(SSR, SSG, ISR), API Routes, dan optimasi gambar. Dunia pengembangan web itu luas, dan Next.js adalah alat yang luar biasa untuk menjelajahinya!<\/p>\n\n\n\n<p>Siap untuk membuat website impianmu sendiri dengan Next.js?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cara membuat website dengan Next.js, Di dunia pengembangan web yang bergerak cepat, memilih framework\u00a0yang tepat itu krusial. Jika kamu ingin membangun website yang cepat, punya performa tinggi, dan scalable, Next.js\u00a0adalah salah satu pilihan terbaik. Next.js adalah framework\u00a0React yang powerful, dirancang khusus untuk menciptakan aplikasi web modern dengan kemudahan server-side rendering\u00a0(SSR), static site generation\u00a0(SSG), dan banyak&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1213,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[119],"tags":[197],"class_list":["post-1212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-website","article","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","has-title","has-post-media","thumbnail-"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Membuat Website Dengan Next.js - digisiana<\/title>\n<meta name=\"description\" content=\"Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js dari nol hingga deployment.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Membuat Website Dengan Next.js - digisiana\" \/>\n<meta property=\"og:description\" content=\"Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js dari nol hingga deployment.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"digisiana\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-16T07:43:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-16T07:43:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/digisiana.com\/blog\/#\/schema\/person\/feca16db5f6cdea339e531ed947011d4\"},\"headline\":\"Cara Membuat Website Dengan Next.js\",\"datePublished\":\"2025-07-16T07:43:19+00:00\",\"dateModified\":\"2025-07-16T07:43:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/\"},\"wordCount\":1404,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/digisiana.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png\",\"keywords\":[\"website\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/\",\"url\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/\",\"name\":\"Cara Membuat Website Dengan Next.js - digisiana\",\"isPartOf\":{\"@id\":\"https:\/\/digisiana.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png\",\"datePublished\":\"2025-07-16T07:43:19+00:00\",\"dateModified\":\"2025-07-16T07:43:24+00:00\",\"description\":\"Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js dari nol hingga deployment.\",\"breadcrumb\":{\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage\",\"url\":\"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png\",\"contentUrl\":\"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png\",\"width\":600,\"height\":400,\"caption\":\"Cara Membuat Website Dengan Next.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digisiana.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Membuat Website Dengan Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digisiana.com\/blog\/#website\",\"url\":\"https:\/\/digisiana.com\/blog\/\",\"name\":\"digisiana\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/digisiana.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digisiana.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/digisiana.com\/blog\/#organization\",\"name\":\"digisiana\",\"url\":\"https:\/\/digisiana.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digisiana.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo-17-removebg-preview.png\",\"contentUrl\":\"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo-17-removebg-preview.png\",\"width\":820,\"height\":304,\"caption\":\"digisiana\"},\"image\":{\"@id\":\"https:\/\/digisiana.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/digisiana.com\/blog\/#\/schema\/person\/feca16db5f6cdea339e531ed947011d4\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digisiana.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/digisiana.com\"],\"url\":\"https:\/\/digisiana.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Membuat Website Dengan Next.js - digisiana","description":"Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js dari nol hingga deployment.","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:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/","og_locale":"en_US","og_type":"article","og_title":"Cara Membuat Website Dengan Next.js - digisiana","og_description":"Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js dari nol hingga deployment.","og_url":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/","og_site_name":"digisiana","article_published_time":"2025-07-16T07:43:19+00:00","article_modified_time":"2025-07-16T07:43:24+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#article","isPartOf":{"@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/"},"author":{"name":"admin","@id":"https:\/\/digisiana.com\/blog\/#\/schema\/person\/feca16db5f6cdea339e531ed947011d4"},"headline":"Cara Membuat Website Dengan Next.js","datePublished":"2025-07-16T07:43:19+00:00","dateModified":"2025-07-16T07:43:24+00:00","mainEntityOfPage":{"@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/"},"wordCount":1404,"commentCount":0,"publisher":{"@id":"https:\/\/digisiana.com\/blog\/#organization"},"image":{"@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png","keywords":["website"],"articleSection":["Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/","url":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/","name":"Cara Membuat Website Dengan Next.js - digisiana","isPartOf":{"@id":"https:\/\/digisiana.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage"},"image":{"@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png","datePublished":"2025-07-16T07:43:19+00:00","dateModified":"2025-07-16T07:43:24+00:00","description":"Selamat! Kamu sudah mempelajari cara membuat website dengan Next.js dari nol hingga deployment.","breadcrumb":{"@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#primaryimage","url":"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png","contentUrl":"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/07\/Digisiana-30-1.png","width":600,"height":400,"caption":"Cara Membuat Website Dengan Next.js"},{"@type":"BreadcrumbList","@id":"https:\/\/digisiana.com\/blog\/cara-membuat-website-dengan-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digisiana.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Membuat Website Dengan Next.js"}]},{"@type":"WebSite","@id":"https:\/\/digisiana.com\/blog\/#website","url":"https:\/\/digisiana.com\/blog\/","name":"digisiana","description":"","publisher":{"@id":"https:\/\/digisiana.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digisiana.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/digisiana.com\/blog\/#organization","name":"digisiana","url":"https:\/\/digisiana.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digisiana.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo-17-removebg-preview.png","contentUrl":"https:\/\/digisiana.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo-17-removebg-preview.png","width":820,"height":304,"caption":"digisiana"},"image":{"@id":"https:\/\/digisiana.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/digisiana.com\/blog\/#\/schema\/person\/feca16db5f6cdea339e531ed947011d4","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digisiana.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/digisiana.com"],"url":"https:\/\/digisiana.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/posts\/1212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/comments?post=1212"}],"version-history":[{"count":1,"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/posts\/1212\/revisions"}],"predecessor-version":[{"id":1214,"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/posts\/1212\/revisions\/1214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/media\/1213"}],"wp:attachment":[{"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/media?parent=1212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/categories?post=1212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digisiana.com\/blog\/wp-json\/wp\/v2\/tags?post=1212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}