<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta content="width=device-width, initial-scale=1" name="viewport">
 </head>
 <body>
 Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.
 This is an image:
 
 <img src="/images/profilepic.jpg" alt="Example image">
 
 <div class="remark-highlight">
 <pre class="language-javascript"><code class="language-javascript">{
 "firstName" : "John",
}
</code></pre>
 </div>
 <ul>
 <li>Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.</li>
 <li>Server-side Rendering is the pre-rendering method that generates the HTML on each request.</li>
 </ul>
 Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
 </body>
</html>

Trying Js hand at Next.js