Introduction to Next.js | NextJs Tutorial for Beginners #1

Our first Next.js website | NextJs Tutorial for Beginners #2

File Based Routing in Next.js | NextJs Tutorial for Beginners #3

JavaScript and React Refresher for Next.js | NextJs Tutorial for Beginners #4

Project 1: Hunting Coder - A Coder's Blog | NextJs Tutorial for Beginners #5

Head and Script Component in Next.js | NextJs Tutorial for Beginners #6

Image Component in Next.js | NextJs Tutorial for Beginners #7

Creating Multiple Pages in Next.js | NextJs Tutorial for Beginners #8

Link component in Next.js - Understanding next/link | NextJs Tutorial for Beginners #9

Component Level CSS in Next.js | NextJs Tutorial for Beginners #10

Adding Global Styles in Next.js | NextJs Tutorial for Beginners #11

Styled jsx in Next.js | NextJs Tutorial for Beginners #12

Basic Cleanup of Hunting Coder Blog | NextJs Tutorial for Beginners #13

Displaying Navbar on all pages | NextJs Tutorial for Beginners #14

Creating Blog and Blogpost page | NextJs Tutorial for Beginners #15

Adding blog jsons as data | NextJs Tutorial for Beginners #16

Introduction to API Routes in Next.js | NextJs Tutorial for Beginners #17

Creating endpoints to get one/all blogposts | NextJs Tutorial for Beginners #18

Using the API Endpoints | NextJs Tutorial for Beginners #19

Fetching BlogPost using /getblog Endpoint | NextJs Tutorial for Beginners #20

Prerendering Strategies in Next.js | NextJs Tutorial for Beginners #21

Server Side Rendering - getServerSideProps() in Next.js | NextJs Tutorial for Beginners #22

Static site generation, getStaticProps() & getStaticPaths | NextJs Tutorial for Beginners #23

Rendering HTML text using dangerouslySetInnerHTML in Next.js | NextJs Tutorial for Beginners #24

Creating an API to save Contact Data | NextJs Tutorial for Beginners #25

Designing the /contact FrontEnd Page | NextJs Tutorial for Beginners #26

Designing the About Page | NextJs Tutorial for Beginners #27

Styling Fixes in our Hunting coder Blog | NextJs Tutorial for Beginners #28

Adding Infinite Scroll to Hunting Coder | NextJs Tutorial for Beginners #29

Adding Responsive Design to Hunting Coder | NextJs Tutorial for Beginners #30

Deploying Hunting Coder | NextJs Tutorial for Beginners #31

Adding huntingcoder.com Domain and Search Console | NextJs Tutorial for Beginners #32

In the last lecture, we saw the implementation of the first prerendering strategy, Server-Side Rendering on our website, Hunting Coder. We applied Server-Side Rendering using the getServerSideProps method on two of our content pursuing pages, blog and blog post.
&nbsp;
Due to the fact that we learned about two prerendering strategies earlier, we will now see what Static Site Generation does for our website when we implement it as we did with Server-Side Rendering. Furthermore, we will see how we can utilise the getStaticProps and getStaticPaths functions to accomplish this implementation. If I have to point this out, implementing Server-Side Rendering utilises just one function getServerSideProps while Static Side Generation needs two.
Start by running the development server. So, what happens when you apply Static Site Generation to your website is, a static site which has nothing to do with the APIs or the server is generated and that contains your whole content. Deploying this static is very similar to running a locally stored HTML file.
&nbsp;
<h2>What are getStaticProps &amp; getStaticPaths?</h2>
Here, we use two functions namely, getStaticProps and getStaticPaths. Since we are generating a static site of the whole website, we would need static pages for all the accessible pages present on the website, even the dynamic ones. So, getStaticProps returns a props object containing all the information it fetched from the database. Since APIs aren't available at the time the static site is generated, that part gets replaced by logic. Occasionally, a website will have dynamic pages, such as our blog post page. So, we need to define a list of paths to be statically generated for the getStaticProps function to make use of. And for that only, we use the getStaticPaths function. Once they are implemented in Hunting Coder, it will be clearer.
<pre class="language-javascript"><code>export async function getStaticProps(context) {
 return {
 props: {}, // will be passed to the page component as props
 }
}
</code></pre>
Code Snippet 1: Syntax of a getStaticProps function
&nbsp;
<pre class="language-javascript"><code>export async function getStaticPaths() {
 return {
 paths: [
 { params: { ... } }
 ],
 fallback: true // false or 'blocking'
 };
}
</code></pre>
Code Snippet 2: Syntax of a getStaticPaths function
&nbsp;
<h3>Using getStaticPaths in [slug].js:</h3>
Using getStaticPaths is very easy. We just have to list all the dynamic routes as a value to the params key in the path object of the return statement of the function. So, simply add the below snippet in the [slug].js file.
<pre class="language-javascript"><code>export async function getStaticPaths() {
 return {
 paths: [
 { params: { slug: 'how-to-learn-flask' } },
 { params: { slug: 'how-to-learn-javascript' } },
 { params: { slug: 'how-to-learn-nextjs' } },
 ],
 fallback: true // false or 'blocking'
 };
}
</code></pre>
Code Snippet 3: Using getStaticPaths in pages/blogpost/[slug].js
&nbsp;
<h3>Using getStaticProps in [slug].js:</h3>
Having listed the dynamic routes, we can feed the paths in the getStaticProps function. This function can access the paths via context.params. Earlier we were using the getblog API to fetch the blog data using the queried slug, but as I said earlier, API aren&rsquo;t available there when we generate the static copy of the site. Consequently, we must substitute logical statements for the statements we used earlier. And for that, we will just have to copy the raw statements we wrote in the API files of the corresponding pages, here, the getblog.js. Here&rsquo;s how the function looks.
<pre class="language-javascript"><code>export async function getStaticProps(context) {
 const { slug } = context.params;
 let myBlog = await fs.promises.readFile(`blogdata/${slug}.json`, 'utf-8')
 return {
 props: { myBlog: JSON.parse(myBlog) }, // will be passed to the page component as props
 }
}
</code></pre>
Code Snippet 4: Using getStaticProps in pages/blogpost/[slug].js
&nbsp;
<h3>Using getStaticProps in blog.js:</h3>
Similar to what we did above, we&rsquo;ll simply replace the content of the function with that of the logic of the blogs API. Here&rsquo;s how it looks.
<pre class="language-javascript"><code>export async function getStaticProps(context) {
 let data = await fs.promises.readdir("blogdata");
 let myfile;
 let allBlogs = [];
 for (let index = 0; index &lt; data.length; index++) {
 const item = data[index];
 console.log(item)
 myfile = await fs.promises.readFile(('blogdata/' + item), 'utf-8')
 allBlogs.push(JSON.parse(myfile))
 }

 return {
 props: { allBlogs }, // will be passed to the page component as props
 }
}
</code></pre>
Code Snippet 5: Using getStaticProps in pages/blog.js
Please adhere to the changes we have made while replacing the APIs with logical statements. Don&rsquo;t forget to include the file read system module fs.
&nbsp;
<h3>Additional changes</h3>
1. You cannot use the Image component of NextJS while building a static site. So, we&rsquo;ll replace that with the &lt;img&gt; Here&rsquo;s the changed image component.
<pre class="language-javascript"><code>{/* &lt;Image className={styles.myImg} src="/homeimg.jfif" width={237} height={158}/&gt; */}
&lt;img className={styles.myImg} src="/homeimg.jfif" width={237} height={158} alt="hunting coder" /&gt;
</code></pre>
Code Snippet 6: Replacing the Image component
&nbsp;
2. Now, we have written the program for generating the static site of the whole website, but we still need a script to enable the export feature of the website. So, open json and add the following code in the scripts object.
<pre class="language-javascript"><code>"export": "next build &amp;&amp; next export"</code></pre>
&nbsp;
3.&nbsp;While our website on running the command yarn export would generate a static copy of itself and store it in an out directory, the files there, on opening, would strictly want you to put the .html extension while browsing every time. To avoid that, we will put this code in the exports object of the next.config.js file.
<pre class="language-javascript"><code>trailingSlash: true</code></pre>
&nbsp;
Here&rsquo;s the changed version of the blog.js and [slug].js files.
<pre class="language-javascript"><code>import React, { useEffect, useState } from 'react';
import styles from '../styles/Blog.module.css'
import Link from 'next/link';
import * as fs from 'fs';

// Step 1: Collect all the files from blogdata directory
// Step 2: Iterate through the and Display them

const Blog = (props) =&gt; {
 console.log(props)
 const [blogs, setBlogs] = useState(props.allBlogs);
 // useEffect(() =&gt; {

 // }, [])
 return &lt;div className={styles.container}&gt;
 &lt;main className={styles.main}&gt;
 {blogs.map((blogitem) =&gt; {
 return &lt;div key={blogitem.slug}&gt;
 &lt;Link href={`/blogpost/${blogitem.slug}`}&gt;
 &lt;h3 className={styles.blogItemh3}&gt;{blogitem.title}&lt;/h3&gt;&lt;/Link&gt;
 &lt;p className={styles.blogItemp}&gt;{blogitem.content.substr(0, 140)}...&lt;/p&gt;
 &lt;/div&gt;
 })}
 &lt;/main&gt;
 &lt;/div&gt;
};


export async function getStaticProps(context) {
 let data = await fs.promises.readdir("blogdata");
 let myfile;
 let allBlogs = [];
 for (let index = 0; index &lt; data.length; index++) {
 const item = data[index];
 console.log(item)
 myfile = await fs.promises.readFile(('blogdata/' + item), 'utf-8')
 allBlogs.push(JSON.parse(myfile))
 }

 return {
 props: { allBlogs }, // will be passed to the page component as props
 }
}

export default Blog;
</code></pre>
Code Snippet 7: pages/blog.js 
&nbsp;
<pre class="language-javascript"><code>import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router'
import styles from '../../styles/BlogPost.module.css'
import * as fs from 'fs';

// Step 1: Find the file corresponding to the slug
// Step 2: Populate them inside the page
const Slug = (props) =&gt; {
 const [blog, setBlog] = useState(props.myBlog);


 return &lt;div className={styles.container}&gt;
 &lt;main className={styles.main}&gt;
 &lt;h1&gt;{blog &amp;&amp; blog.title}&lt;/h1&gt;
 &lt;hr /&gt;
 &lt;div&gt;
 {blog &amp;&amp; blog.content}
 &lt;/div&gt;
 &lt;/main&gt;
 &lt;/div&gt;;
};

export async function getStaticPaths() {
 return {
 paths: [
 { params: { slug: 'how-to-learn-flask' } },
 { params: { slug: 'how-to-learn-javascript' } },
 { params: { slug: 'how-to-learn-nextjs' } },
 ],
 fallback: true // false or 'blocking'
 };
}

export async function getStaticProps(context) {
 const { slug } = context.params;


 let myBlog = await fs.promises.readFile(`blogdata/${slug}.json`, 'utf-8')

 return {
 props: { myBlog: JSON.parse(myBlog) }, // will be passed to the page component as props
 }
}
export default Slug;
</code></pre>
Code Snippet 8: pages/blogpost/[slug].js 
&nbsp;
So, that was the implementation of Static Site Generation in Hunting Coder. Our client would no longer have to fetch API themselves, rather we are prerendering hydrated HTMLs to them on our end. We will learn more about these optimisations in the coming lectures. Until then, stay tuned.
&nbsp;