What is SSG(Pre Rendering) in Next JS

What is Static Site Generation (SSG) in NextJS

Before you understand SSG in NextJS lets understand what SSG is in general. Static Site Generation (SSG) is a way in web development that helps to pre-render the data in build time so that when see deploy our application; instead of processing and giving us the result we get the static files directly. This will help uplift the application performance in general as well as increase applications' SEO as well.

To achieve SSG we can use following code snippet

import { GetStaticPaths, GetStaticProps } from "next";

type THomePage={
applicationData:string // Anything that you would use as prop for your page
}

const HomePage = ({ applicationData }:THomePage ) =>{
......
}

export const getStaticPaths: GetStaticPaths = async ()=>{
const paths =  await fetchAllAuthorsName();
// Fetch Details From helpers or config which return following type
/**
(alias) fetchAllAuthorsName(): Promise<{
    params: {
        name: string;
    };
}[]>
**/
	return {
		paths,
		fallback: false,
	};
}

export const getStaticProps: GetStaticProps = async ({ params }: any) => {
// Now we can access the name from the dynamic directory we created [name].js
	const author = await fetchAuthorByName(params.name);
	return {
		props: {
			author,
		},
	};
};

export default HomePage;