
<p>Ketika perpindahan halaman, Next.js akan melakukannya secara &#8220;ajax&#8221;. Dari proses tersebut browser tidak melakukan full-reload dan tidak menampilkan indikator loading.</p>



<p>Kelebihannya adalah halaman terasa sangat cepat ketika dibuka dan ini akan meningkatkan user-experience tentunya, tapi jika halamannya berat maka yang user rasakan seolah olah halaman tidak merespon sama sekali dan dianggap nge-hang, padahal dibalik itu Next.js sedang memuat halaman yang dituju, hal itu justru akan berdampak negatif ke user experience.</p>



<figure class="wp-block-image size-large"><img data-attachment-id="19" data-permalink="https://erwinblogdata.wordpress.com/before-nprogress/" data-orig-file="https://erwinblogdata.files.wordpress.com/2021/07/before-nprogress.gif" data-orig-size="519,260" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="before-nprogress" data-image-description="" data-image-caption="" data-medium-file="https://erwinblogdata.files.wordpress.com/2021/07/before-nprogress.gif?w=300" data-large-file="https://erwinblogdata.files.wordpress.com/2021/07/before-nprogress.gif?w=519" src="https://erwinblogdata.files.wordpress.com/2021/07/before-nprogress.gif" alt="" class="wp-image-19" /></figure>



<p>Untuk itu diperlukanlah indikator loading, berikut tutorial sederhananya</p>



<p>Buka terminal lalu ketik command berikut</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: bash; title: ; notranslate" title="">
mkdir next-nprogress && cd next-nprogress
npm init -y && npm install next react react-dom nprogress
</pre></div>


<p><small>Command tsb akan membuat folder <code>next-nprogress</code> sekaligus memasang depedensi yang diperlukan</small></p>



<p>Edit file <code>package.json</code> dan sesuaikan npm-script seperti berikut</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate" title="">
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}
</pre></div>


<p>Sehingga kode akhir file package.json kurang lebih seperti berikut</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate" title="">
{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^11.0.1",
    "nprogress": "^0.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}
</pre></div>


<p>Selanjutnya buat folder <code>pages</code> dan buat 4 file di dalam folder tsb yaitu file <code>_app.js</code> <code>index.js</code> <code>ringan.js</code> dan <code>berat.js</code></p>



<p>Isi kode dibawah untuk file <code>index.js</code></p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
import Link from 'next/link'

function Home() {
  return (
    &lt;&gt;
      &lt;h1&gt;Hai, selamat datang.&lt;/h1&gt;
      &lt;p&gt;&lt;Link href=&quot;/ringan&quot;&gt;&lt;a&gt;Contoh halaman ringan&lt;/a&gt;&lt;/Link&gt;&lt;/p&gt;
      &lt;p&gt;&lt;Link href=&quot;/berat&quot;&gt;&lt;a&gt;Contoh halaman berat&lt;/a&gt;&lt;/Link&gt;&lt;/p&gt;
    &lt;/&gt;
  )
}
export default Home
</pre></div>


<p>Kode dibawah untuk file <code>ringan.js</code></p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
import Link from 'next/link'

function Ringan() {
  return (
    &lt;&gt;
      &lt;p&gt;Halaman ringan, Lorem ipsum dolor sit amet.&lt;/p&gt;
      &lt;Link href=&quot;/&quot;&gt;&lt;a&gt;Back to home&lt;/a&gt;&lt;/Link&gt;
    &lt;/&gt;
  )
}
export default Ringan
</pre></div>


<p>Kode dibawah untuk file <code>berat.js</code></p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
import Link from 'next/link'

export async function getServerSideProps() {
  await new Promise(resolve =&gt; setTimeout(resolve, 1000)) // contoh delay 1 detik (1000ms)
  return {
    props: {}
  }
}

function Berat() {
  return (
    &lt;&gt;
      &lt;p&gt;Halaman berat, Lorem ipsum dolor sit amet.&lt;/p&gt;
      &lt;Link href=&quot;/&quot;&gt;&lt;a&gt;Back to home&lt;/a&gt;&lt;/Link&gt;
    &lt;/&gt;
  )
}
export default Berat
</pre></div>


<p>Terakhir kode dibawah untuk file <code>_app.js</code></p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
import Router from 'next/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

Router.events.on('routeChangeStart', () =&gt; NProgress.start())
Router.events.on('routeChangeComplete', () =&gt; NProgress.done())
Router.events.on('routeChangeError', () =&gt; NProgress.done())

function App({ Component, pageProps }) {
  return &lt;Component {...pageProps} /&gt;
}

export default App
</pre></div>


<p>Selesai, tinggal jalankan command <code>npm run dev</code> untuk melihat hasilnya</p>



<figure class="wp-block-image size-large"><img data-attachment-id="25" data-permalink="https://erwinblogdata.wordpress.com/2021/07/03/menambahkan-progress-bar-di-next-js/after-nprogress/" data-orig-file="https://erwinblogdata.files.wordpress.com/2021/07/after-nprogress.gif" data-orig-size="519,260" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="after-nprogress" data-image-description="" data-image-caption="" data-medium-file="https://erwinblogdata.files.wordpress.com/2021/07/after-nprogress.gif?w=300" data-large-file="https://erwinblogdata.files.wordpress.com/2021/07/after-nprogress.gif?w=519" src="https://erwinblogdata.files.wordpress.com/2021/07/after-nprogress.gif" alt="next.js with nprogress de" class="wp-image-25" /></figure>



<p>Terimakasih, semoga bermanfaat 🙂</p>


Menambahkan progress bar di Next.js


<p><a rel="noreferrer noopener" href="https://prismjs.com/" target="_blank">Prism.js</a> adalah salah satu syntax highlighter populer yang banyak digunakan di website ternama seperti smashingmagazine, css-tricks, sitepoint dsb, untuk menampilkan &#8220;styled code boxes&#8221; seperti dibawah ini</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: xml; title: ; notranslate" title="">
&lt;html&gt;
&lt;body&gt;
  &lt;div&gt;
    &lt;h1&gt;Hello&lt;/h2&gt;
    &lt;h2&gt;I'm some styled syntax!&lt;/h2&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div>


<p>Untuk pemasangan pada website &#8220;tradisional&#8221; caranya cukup mudah hanya tinggal <a rel="noreferrer noopener" href="https://prismjs.com/download.html" target="_blank">download</a> filenya atau bisa menggunakan CDN lalu sertakan file css dan js maka prismjs akan bekerja secara otomatis.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: xml; title: ; notranslate" title="">
&lt;html&gt;
&lt;head&gt;
  &lt;link href=&quot;https://unpkg.com/prismjs/themes/prism.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;html&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;div&amp;gt;
    &amp;lt;h1&amp;gt;Hello&amp;lt;/h2&amp;gt;
    &amp;lt;h2&amp;gt;I'm some styled syntax!&amp;lt;/h2&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;script src=&quot;https://unpkg.com/prismjs/prism.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div>


<p>Tapi untuk pemasangan di Framework Next.js berbeda karena konsep Next.js akan memuat halaman awal sekali saja, maka ketika berpindah ke halaman lainnya syntax highlighter tidak akan bekerja.</p>



<p>Untuk mengatasi hal itu, salah satu caranya adalah menjalankan prismjs secara manual disetiap halaman yang dibuka.</p>



<p>Berikut tutorial sederhana membuat halaman Home &amp; Detail dengan Next.js yang nantinya di halaman Detail akan menampilkan artikel yang menggandung kode untuk dipakai syntax highlighter.</p>



<p>Buka terminal lalu ketik command berikut</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: bash; title: ; notranslate" title="">
mkdir next-prism && cd next-prism
npm init -y && npm install next react react-dom prismjs
</pre></div>


<p><small>Command tsb akan membuat folder <code>next-prism</code> sekaligus memasang depedensi yang diperlukan</small></p>



<p>Edit file <code>package.json</code> dan sesuaikan npm-script seperti berikut</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate" title="">
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}
</pre></div>


<p>Sehingga kode akhir file <code>package.json</code> kurang lebih seperti berikut</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate" title="">
{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^11.0.1",
    "prismjs": "^1.24.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}
</pre></div>


<p>Selanjutnya buat folder <code>pages</code> dan buat 2 file di dalam folder tsb yaitu file <code>index.js</code> dan <code>detail.js</code></p>



<p>Isi kode dibawah untuk file <code>index.js</code></p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
import Link from 'next/link'

function Home() {
  return (
    &lt;&gt;
      &lt;h1&gt;Hai, selamat datang.&lt;/h1&gt;
      &lt;p&gt;Artikel terbaru:&lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;Link href=&quot;/detail&quot;&gt;&lt;a&gt;Belajar HTML&lt;/a&gt;&lt;/Link&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/&gt;
  )
}
export default Home
</pre></div>


<p>Dan kode dibawah untuk file <code>detail.js</code></p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
import { useEffect } from 'react'
import Link from 'next/link'

import 'prismjs/themes/prism-tomorrow.css'
import prism from 'prismjs'
prism.manual = true

function Detail() {
  useEffect(() =&gt; {
    prism.highlightAll()
  }, &#91;])
  return (
    &lt;&gt;
      &lt;h1&gt;Belajar HTML&lt;/h1&gt;
      &lt;p&gt;HTML adalah bahasa markup standar untuk halaman Web.&lt;/p&gt;
      &lt;p&gt;Dengan HTML Anda dapat membuat Website Anda sendiri.&lt;/p&gt;
      &lt;p&gt;HTML mudah dipelajari - Berikut contoh syntax HTML&lt;/p&gt;
      &lt;pre&gt;&lt;code className=&quot;language-html&quot;&gt;{`&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;title&gt;Belajar HTML&lt;/title&gt;
&lt;body&gt;
  &lt;h1&gt;Ini adalah heading&lt;/h1&gt;
  &lt;p&gt;Ini adalah paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;`}&lt;/code&gt;&lt;/pre&gt;
      &lt;p&gt;Bersambung...&lt;/p&gt;
      &lt;Link href=&quot;/&quot;&gt;&lt;a&gt;Kembali ke home&lt;/a&gt;&lt;/Link&gt;
    &lt;/&gt;
  )
}
export default Detail
</pre></div>


<p>Perhatikan isi file detail.js. Untuk menjalankan fungsi ketika DOM siap, kita menggunakan React hook &#8220;<a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="noreferrer noopener">useEffect</a>&#8220;. Kita hanya ingin menjalankan <code>highlightAll()</code> sekali ketika DOM komponen sudah siap, jadi kita menambahkan array kosong <code>[]</code> sebagai parameter kedua ke hook <code>useEffect()</code>, yang sama dengan metode <code>componentDidMount()</code> dalam komponen class React.</p>



<p>Selesai, tinggal jalankan command <code>npm run dev</code> untuk melihat hasilnya.</p>



<figure class="wp-block-image size-large"><img data-attachment-id="13" data-permalink="https://erwinblogdata.wordpress.com/2021/07/01/menggunakan-prism-js-di-next-js/next-prism-2/" data-orig-file="https://erwinblogdata.files.wordpress.com/2021/07/next-prism.gif" data-orig-size="694,577" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="next-prism" data-image-description="" data-image-caption="" data-medium-file="https://erwinblogdata.files.wordpress.com/2021/07/next-prism.gif?w=300" data-large-file="https://erwinblogdata.files.wordpress.com/2021/07/next-prism.gif?w=694" src="https://erwinblogdata.files.wordpress.com/2021/07/next-prism.gif" alt="" class="wp-image-13" /></figure>



<h3>Tips</h3>



<p>Tutorial diatas hanya akan menjalankan syntax highlighter pada halaman <code>/detail</code> saja. Untuk bisa menjalankannya disetiap halaman maka kita harus import file css di <code>pages/_app.js</code> dan import file js di <code>components/layout.js</code></p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
// pages/_app.js
import '../styles/global.css'
import 'prismjs/themes/prism-tomorrow.css'

export default function App({ Component, pageProps }) {
  return &lt;Component {...pageProps} /&gt;
}
</pre></div>

<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate" title="">
// components/layout.js
import prism from 'prismjs'
prism.manual = true

function Layout(props) {
  useEffect(() =&gt; {
    prism.highlightAll()
  }, &#91;])
  
  // ...
}
</pre></div>


<p>Silahkan baca lebih lanjut tentang <code>_app.js</code> <a rel="noreferrer noopener" href="https://nextjs.org/learn/basics/assets-metadata-css/global-styles" target="_blank">disini</a> dan tentang <code>layout.js</code> <a rel="noreferrer noopener" href="https://nextjs.org/learn/basics/assets-metadata-css/layout-component" target="_blank">disini</a>.</p>



<p>Terimakasih, semoga bermanfaat 🙂</p>
