In the previous post, We created a BlogPost application rendering content on server-side with Next.js. We will be changing the same application to use SSG (Static Generation) capability of Next.js.
What will we create and which Next.js functions will we use?
We will create an application which will have index page to list all the available blog links and statically generated blog posts. We will use getStaticProps
and getStaticPaths
functions from Next.js.
getStaticProps
function is called by Next.js at build time and pre-renders the page.
getStaticPaths
function is also called by Next.js at build time. If you are using getStaticProps
and there are dynamic paths then you define those in getStaticPaths
Update index.tsx
import React from 'react'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import BloggerService from '../service/BloggerService'; import styles from '../App.module.css' /* Line 1*/ interface IndexPageProps { blogLinks: Array<{ id: string, title: string }> } export default function IndexPage(props: IndexPageProps) { /* Line 2 */ return ( <div className={ styles['blog-container'] }> <ul className={ styles['blog-posts'] }> {props.blogLinks.map(blogLink => <li key={blogLink.id}><a href={`/posts/${encodeURIComponent(blogLink.id)}`}>{blogLink.title}</a></li>)} </ul> </div> ); } /* Line 3 */ export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext<any>) => { const bloggerPosts = await BloggerService.getAllPosts(); const blogLinks = bloggerPosts.posts.map(post => { const splittedId = post.id.split('-') return { id: splittedId[splittedId.length - 1], title: post.title } }); return { props: { blogLinks } } }
At line 1, we defines the props type expected by IndexPage function. At Line 2, we are returning React.Element. We are iterating on the blogLinks passed as props to this component and returns a list. This property is passed from getStaticProps
function at build time. At Line 3, we are defining getStaticProps function. We are calling BloggerService and retrieving blog feeds from https://codefoundry.dev. Then, we are extracting two properties id and title and are returning those from this method.
At the build time, Next.js will call this function on server-side and will pass these properties to IndexPage function and will generate static HTML on server. That static HTML will be served everytime.
Creating [slug].tsx to catch all the routes
Next step is to create [slug].tsx
under pages/posts folder. This component will catch all the dymaically generated URL and will open the statically generated HTML if found otherwise endup showing 404 page.
import React from 'react'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; import IBlogPost from '../../models/IBlogPost'; import BloggerService from '../../service/BloggerService'; import BlogPost from '../../components/BlogPost'; import styles from '../../App.module.css'; /* Line 1 */ interface IServerProps { post: IBlogPost } export default (props: IServerProps) => { /* Line 2 */ return ( <> <div className={styles['App-Container']}> <BlogPost post={props.post} /> </div> </> ); } /* Line 3 */ export const getStaticPaths: GetStaticPaths = async() => { const bloggerPosts = await BloggerService.getAllPosts(); const paths = bloggerPosts.posts.map(post => { const splittedId = post.id.split('-') const slug = splittedId[splittedId.length - 1] return { params: { slug } } }); return { paths, fallback: false } } /* Line 4 */ export const getStaticProps: GetStaticProps = async(context: GetStaticPropsContext<any>) => { const slug = context?.params?.slug ?? 'na' const bloggerPosts = await BloggerService.getAllPosts(); const post = bloggerPosts.posts.find( post => post.id.endsWith(slug)) return { props: { post } } }
At Line 1, we are creating type for props this component takes. At Line 2, we are returning React.Element. We are passing post property from props to BlogPost component. This property is passed by getStaticProps
function at build time.
At Line 3, we are defining getStaticPaths
function. This function returns the list of dynamic paths this page will handle.
At Line 4, we are defining getStaticProps
function. This function reads the slug property from context's params property. This proeprty is generated by getStaticPaths
function(Line3) and then get the post from BloggerService and finally this post property is passed to this page (Line 2).
I have modified existing code for this example. Let's cleanup code which is not required.
First, remove unwanted libraries with npm remove @reduxjs/toolkit react-redux next-on-netlify
command. Remove BlogSearch.tsx, BlogListing.tsx, BlogPosts.tsx and BlogPosts.module.css from src/components folder. Remove index.css and index.tsx from src folder. Update _app.tsx under src/pages and remove redux store and provider. That's it.
Let's run the application.
Click on any link and you will see statically generated blog page.
That's it :). You can download the full code from github.
Recap
In this post, we introduced getStaticPaths
and getStaticProps
methods of Next.js for Static site generation. We used both methods in [slug].tsx for dynamic path generation. At last, we removed unwanted files from last code example.
What's next?
In the next post, we will deploy Next.js project (Static Generation and SSR) on Netlify.
Comments
Post a Comment