{"id":21208,"date":"2024-05-24T11:22:00","date_gmt":"2024-05-24T04:22:00","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=21208"},"modified":"2024-05-31T09:44:47","modified_gmt":"2024-05-31T02:44:47","slug":"nextjs-framework-berbasis-react-yang-seo-friendly","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/nextjs-framework-berbasis-react-yang-seo-friendly\/","title":{"rendered":"NextJS, Framework Berbasis React yang SEO-friendly"},"content":{"rendered":"

NextJS, Framework Berbasis React yang SEO-friendly<\/h1><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Developer sering menggunakan framework berbasis JavaScript NextJS. Pasalnya, selain menawarkan beberapa kemampuan optimasi dan dukungan CSS yang membuatnya tak kalah menarik dibandingkan framework lainnya, framework NextJS menyediakan banyak sekali fitur untuk melayani kebutuhan pengembangan website. Penasaran dengan fungsi Next.js? Silakan baca artikel ini sampai akhir.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Apa itu NextJS?<\/h2><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"nextjs\"<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

NextJS adalah framework berbasis React yang memudahkan pembuatan aplikasi web yang siap produksi dan SEO-friendly tanpa memerlukan banyak konfigurasi manual. Kemampuan Next.js untuk menghasilkan halaman web baik secara statis (melalui SSG) dan secara dinamis (melalui SSR) memberikan pilihan kepada pengguna dalam memilih pendekatan rendering yang optimal berdasarkan persyaratan tertentu dari halaman atau aplikasi. Ini adalah salah satu keunggulan utama Next.js.<\/span><\/p>\n

Fitur tersebut memungkinkan aplikasi yang dibangun dengan Next.js menjalankan load lebih cepat dan meningkatkan user experience, sekaligus memperbaiki visibilitas mesin pencari karena konten sudah tersedia pada saat halaman dimuat, bukan dihasilkan melalui JavaScript di sisi klien.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Cara Kerja NextJS<\/h3><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"cara<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Next.js menggabungkan kekuatan React untuk pengembangan komponen front-end dengan kemampuan server-side rendering (SSR) dan static site generation (SSG). Berikut cara kerjanya:<\/span><\/p>\n

    \n
  1. Pembuatan proyek:Command Line Interface (CLI) Next.js digunakan untuk membuat proyek Next.js dan mengonfigurasi pengaturan dasarnya di awal proses.<\/span><\/li>\n
  2. Struktur folder: Folder halaman sangat penting untuk struktur folder tradisional yang digunakan oleh Next.js. Secara otomatis mengubah setiap file JavaScript atau JSX di dalamnya menjadi rute aplikasi; misalnya, halaman\/about.js dapat diakses melalui \/about.<\/span><\/li>\n
  3. Komponen dan halaman: Komponen React dapat dibuat oleh pengembang dan digunakan sebagai halaman dengan meletakkannya di folder pages.<\/span><\/li>\n
  4. SSR: Next.js menghasilkan HTML dengan data saat halaman dilihat dengan menjalankan kode halaman di server. Ini meningkatkan SEO dan mempercepat pemuatan halaman klien.<\/span><\/li>\n
  5. SSG: Untuk halaman yang tidak memerlukan data dinamis, Next.js membuatnya sebagai file HTML statis selama proses konstruksi, yang memungkinkan penayangan halaman dengan cepat.<\/span><\/li>\n
  6. ISR: ISR membantu pembaruan “di balik layar” pada halaman statis setelah dipublikasikan, memastikan materi tetap terkini tanpa memerlukan pembangunan kembali situs secara menyeluruh.<\/span><\/li>\n
  7. Routing dan prefetching: Navigasi antar halaman dipercepat menggunakan sistem perutean berbasis file dan pengambilan awal otomatis, dengan pemuatan halaman di latar belakang.<\/span><\/li>\n
  8. API route: Memudahkan integrasi logika backend atau API langsung ke proyek dengan memanfaatkan folder halaman\/api untuk menetapkan titik akhir API.<\/span><\/li>\n
  9. Optimasi dan ekstensi:Pemisahan kode dan pengoptimalan gambar adalah dua cara Next.js mengoptimalkan aplikasi secara otomatis. Untuk meningkatkan fungsionalitas, pengembang juga dapat menyertakan plugin dan penyesuaian unik.<\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    Tutorial NextJS<\/h4><\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t
      \n
    1. Sebelum kita membuat project baru menggunakan Next.js, maka kita perlu melakukan instalasi Node.js terlebih dahulu di dalam komputer. Silahkan lakukan instalasi Node Js di komputer masing-masing, untuk unduh Node Js bisa <\/span>klik disini<\/span><\/a>. Silahkan di install sesuai dengan sistem operasi yang digunakan.<\/span><\/li>\n
    2. Setelah berhasil melakukan instalasi Node.js, sekarang kita akan lanjutkan belajar bagaimana cara membuat project baru di Next.js. Silahkan masuk ke dalam folder dimana teman-teman akan menyimpan project nya, kemudian jalankan perintah berikut ini di dalam terminal\/CMD: npx create-next-app@12.1.4 next-crud<\/span><\/li>\n
    3. Perintah di atas digunakan untuk membuat project Nex.tjs baru dengan nama next-crud Silahkan tunggu proses instalasinya sampai selesai.<\/span><\/li>\n
    4. Setelah berhasil melakukan proses instalasi node.js, sekarang kita akan belajar menjalankan project tersebut. Silahkan jalankan perintah berikut ini di dalam terminal\/CMD: cd next-crud<\/span><\/li>\n
    5. Perintah di atas digunakan untuk melakukan navigasi ke dalam folder next-crud. Setelah itu, jalankan perintah berikut ini: npm run dev<\/span><\/li>\n
    6. Silahkan tunggu proses compile sampai selesai dan project kita akan dijalankan di dalam localhost menggunakan port 3000<\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t\n\t\t
      \n\t\t\t
      \"tutorial<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t
      \n\t\t\t

      Baca juga: Preact JS: Alternatif dan Versi Mini dari React JS<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"NextJS, Framework Berbasis React yang SEO-friendly Developer sering menggunakan framework berbasis JavaScript NextJS. Pasalnya, selain menawarkan beberapa kemampuan optimasi dan dukungan CSS yang membuatnya tak kalah menarik dibandingkan framework lainnya, framework NextJS menyediakan banyak sekali fitur untuk melayani kebutuhan pengembangan website. Penasaran dengan fungsi Next.js? Silakan baca artikel ini sampai akhir. Apa itu NextJS? NextJS [...]","protected":false},"author":32,"featured_media":21210,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wds_title":"NextJS, Framework Berbasis React yang SEO-friendly","_wds_metadesc":"NextJS adalah framework front-end penyempurna React yang dioptimalkan untuk pembangunan aplikasi web modern dengan mudah dan cepat.","_wds_focus-keywords":"NextJS","_wds_meta-robots-adv":"","_wds_meta-robots-noindex":false,"_wds_meta-robots-nofollow":false,"_wds_meta-robots-index":false,"_wds_meta-robots-follow":false,"_wds_autolinks-exclude":false,"_wds_canonical":"","_wds_opengraph":[],"_wds_twitter":[],"wds_primary_category":300,"footnotes":""},"categories":[300],"tags":[444,446,445],"class_list":["post-21208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-cara-kerja-nextjs","tag-nextjs","tag-tutorial-nextjs"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=21208"}],"version-history":[{"count":0,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/21210"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=21208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=21208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=21208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}