{"id":738,"date":"2025-07-22T04:23:44","date_gmt":"2025-07-22T04:23:44","guid":{"rendered":"https:\/\/serkomi.com\/blog\/?p=738"},"modified":"2025-07-22T04:23:46","modified_gmt":"2025-07-22T04:23:46","slug":"cara-buat-website-next-js-dan-deploy-gratis-ke-vercel","status":"publish","type":"post","link":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/","title":{"rendered":"Cara Buat Website Next.js dan Deploy Gratis ke Vercel"},"content":{"rendered":"\n<p>Dalam dunia web development modern, kebutuhan akan performa tinggi, kecepatan akses, dan pengalaman pengguna yang optimal menjadi prioritas. <\/p>\n\n\n\n<p>Salah satu framework yang sangat populer untuk memenuhi kebutuhan ini adalah Next.js. Artikel ini akan membahas pengertian Next.js, manfaatnya, cara membuat website dengan Next.js, serta penutup yang menginspirasi.<\/p>\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:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#Pengertian_Nextjs\" >Pengertian Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#Manfaat_Menggunakan_Nextjs\" >Manfaat Menggunakan 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-3\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#1_Performa_Tinggi\" >1. Performa Tinggi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#2_SEO_Friendly\" >2. SEO Friendly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#3_Routing_Otomatis\" >3. Routing Otomatis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#4_Skalabilitas\" >4. Skalabilitas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#5_Ekosistem_Lengkap\" >5. Ekosistem Lengkap<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#Cara_Membuat_Website_dengan_Nextjs\" >Cara Membuat Website dengan 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-9\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#1_Instalasi_Project\" >1. Instalasi Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#2_Struktur_Direktori\" >2. Struktur Direktori<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#3_Membuat_Halaman_Baru\" >3. Membuat Halaman Baru<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#4_Menambahkan_Navigasi\" >4. Menambahkan Navigasi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#5_Deployment\" >5. Deployment<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#Penutup\" >Penutup<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pengertian_Nextjs\"><\/span>Pengertian Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Next.js adalah framework JavaScript berbasis React yang dikembangkan oleh Vercel. Framework ini dirancang untuk membangun aplikasi web modern dengan fitur seperti server-side rendering (SSR), static site generation (SSG), dan optimisasi performa secara otomatis.<\/p>\n\n\n\n<p>Dengan Next.js, developer bisa membuat website dinamis maupun statis dengan lebih efisien. Framework ini juga menyediakan routing otomatis, dukungan TypeScript, API routes, dan kemampuan integrasi dengan berbagai layanan modern.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong>Baca Juga: <a href=\"https:\/\/serkomi.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Manfaat_Menggunakan_Nextjs\"><\/span>Manfaat Menggunakan Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Performa_Tinggi\"><\/span>1. Performa Tinggi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Next.js memungkinkan pre-rendering halaman, baik secara statis maupun dinamis, sehingga waktu muat menjadi lebih cepat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_SEO_Friendly\"><\/span>2. SEO Friendly<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dengan kemampuan server-side rendering, konten website dapat diindeks lebih baik oleh mesin pencari seperti Google.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Routing_Otomatis\"><\/span>3. Routing Otomatis<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Tanpa perlu konfigurasi tambahan, file di dalam folder <code>pages<\/code> otomatis menjadi route URL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Skalabilitas\"><\/span>4. Skalabilitas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Next.js cocok untuk proyek kecil hingga enterprise, dengan dukungan deployment mudah ke Vercel, Netlify, atau server kustom.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Ekosistem_Lengkap\"><\/span>5. Ekosistem Lengkap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Next.js terintegrasi baik dengan React, TypeScript, Tailwind CSS, GraphQL, dan CMS seperti Sanity atau Strapi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Membuat_Website_dengan_Nextjs\"><\/span>Cara Membuat Website dengan Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Instalasi_Project\"><\/span>1. Instalasi Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pastikan Anda telah menginstal Node.js. Lalu, jalankan perintah berikut di terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app@latest nama-project\ncd nama-project\nnpm run dev\n<\/code><\/pre>\n\n\n\n<p>Website Anda akan berjalan di <code>http:\/\/localhost:3000<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Struktur_Direktori\"><\/span>2. Struktur Direktori<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Folder penting dalam Next.js:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>pages\/<\/code>: Tempat membuat halaman seperti <code>index.js<\/code> (beranda), <code>about.js<\/code>, dll.<\/li>\n\n\n\n<li><code>public\/<\/code>: Menyimpan file statis seperti gambar.<\/li>\n\n\n\n<li><code>styles\/<\/code>: CSS global atau modul.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Membuat_Halaman_Baru\"><\/span>3. Membuat Halaman Baru<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Tambahkan file <code>about.js<\/code> di dalam <code>pages\/<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function About() {\n  return &lt;h1&gt;Tentang Kami&lt;\/h1&gt;;\n}\n<\/code><\/pre>\n\n\n\n<p>Secara otomatis bisa diakses di <code>http:\/\/localhost:3000\/about<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Menambahkan_Navigasi\"><\/span>4. Menambahkan Navigasi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan komponen <code>Link<\/code> dari <code>next\/link<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Link from 'next\/link';\n\nexport default function Navbar() {\n  return (\n    &lt;nav&gt;\n      &lt;Link href=\"\/\"&gt;Beranda&lt;\/Link&gt;\n      &lt;Link href=\"\/about\"&gt;Tentang&lt;\/Link&gt;\n    &lt;\/nav&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Deployment\"><\/span>5. Deployment<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Untuk publish website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buat akun di <a href=\"https:\/\/vercel.com\/\">vercel.com<\/a><\/li>\n\n\n\n<li>Klik \u201cNew Project\u201d > pilih repo GitHub Anda > Deploy.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Penutup\"><\/span>Penutup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Membuat website dengan Next.js memberikan keunggulan dari segi performa, SEO, dan efisiensi pengembangan. <\/p>\n\n\n\n<p>Cocok untuk developer pemula hingga profesional, Next.js menjadi pilihan utama untuk membangun aplikasi web modern. <\/p>\n\n\n\n<p>Mulailah eksplorasi Anda hari ini dan rasakan kemudahannya dalam menciptakan website yang cepat, scalable, dan user-friendly.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dalam dunia web development modern, kebutuhan akan performa tinggi, kecepatan akses, dan pengalaman pengguna yang optimal menjadi prioritas. Salah satu framework yang sangat populer untuk memenuhi kebutuhan ini adalah Next.js. Artikel ini akan membahas pengertian Next.js, manfaatnya, cara membuat website dengan Next.js, serta penutup yang menginspirasi. Pengertian Next.js Next.js adalah framework JavaScript berbasis React yang [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":739,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[284,282,283],"class_list":["post-738","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-deploy-gratis","tag-next-js-tutorial-pemula","tag-website-next-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Buat Website Next.js dan Deploy Gratis ke Vercel - serkomi<\/title>\n<meta name=\"description\" content=\"Pelajari cara membuat website modern dengan Next.js! Tutorial lengkap untuk pemula, dari setup 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:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Buat Website Next.js dan Deploy Gratis ke Vercel - serkomi\" \/>\n<meta property=\"og:description\" content=\"Pelajari cara membuat website modern dengan Next.js! Tutorial lengkap untuk pemula, dari setup hingga deployment.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/\" \/>\n<meta property=\"og:site_name\" content=\"serkomi\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-22T04:23:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-22T04:23:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/\",\"url\":\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/\",\"name\":\"Cara Buat Website Next.js dan Deploy Gratis ke Vercel - serkomi\",\"isPartOf\":{\"@id\":\"https:\/\/serkomi.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.png\",\"datePublished\":\"2025-07-22T04:23:44+00:00\",\"dateModified\":\"2025-07-22T04:23:46+00:00\",\"author\":{\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f\"},\"description\":\"Pelajari cara membuat website modern dengan Next.js! Tutorial lengkap untuk pemula, dari setup hingga deployment.\",\"breadcrumb\":{\"@id\":\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#primaryimage\",\"url\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.png\",\"contentUrl\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.png\",\"width\":600,\"height\":400,\"caption\":\"Cara Buat Website Next.js dan Deploy Gratis ke Vercel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/serkomi.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Buat Website Next.js dan Deploy Gratis ke Vercel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/serkomi.com\/blog\/#website\",\"url\":\"https:\/\/serkomi.com\/blog\/\",\"name\":\"serkomi\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/serkomi.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/serkomi.com\"],\"url\":\"https:\/\/serkomi.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Buat Website Next.js dan Deploy Gratis ke Vercel - serkomi","description":"Pelajari cara membuat website modern dengan Next.js! Tutorial lengkap untuk pemula, dari setup 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:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/","og_locale":"en_US","og_type":"article","og_title":"Cara Buat Website Next.js dan Deploy Gratis ke Vercel - serkomi","og_description":"Pelajari cara membuat website modern dengan Next.js! Tutorial lengkap untuk pemula, dari setup hingga deployment.","og_url":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/","og_site_name":"serkomi","article_published_time":"2025-07-22T04:23:44+00:00","article_modified_time":"2025-07-22T04:23:46+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/","url":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/","name":"Cara Buat Website Next.js dan Deploy Gratis ke Vercel - serkomi","isPartOf":{"@id":"https:\/\/serkomi.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#primaryimage"},"image":{"@id":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#primaryimage"},"thumbnailUrl":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.png","datePublished":"2025-07-22T04:23:44+00:00","dateModified":"2025-07-22T04:23:46+00:00","author":{"@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f"},"description":"Pelajari cara membuat website modern dengan Next.js! Tutorial lengkap untuk pemula, dari setup hingga deployment.","breadcrumb":{"@id":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#primaryimage","url":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.png","contentUrl":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-39.png","width":600,"height":400,"caption":"Cara Buat Website Next.js dan Deploy Gratis ke Vercel"},{"@type":"BreadcrumbList","@id":"https:\/\/serkomi.com\/blog\/cara-buat-website-next-js-dan-deploy-gratis-ke-vercel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/serkomi.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Buat Website Next.js dan Deploy Gratis ke Vercel"}]},{"@type":"WebSite","@id":"https:\/\/serkomi.com\/blog\/#website","url":"https:\/\/serkomi.com\/blog\/","name":"serkomi","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/serkomi.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/serkomi.com"],"url":"https:\/\/serkomi.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/comments?post=738"}],"version-history":[{"count":1,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/738\/revisions"}],"predecessor-version":[{"id":740,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/738\/revisions\/740"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/media\/739"}],"wp:attachment":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/media?parent=738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/categories?post=738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/tags?post=738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}