How to solve Additional keys were returned from `getStaticProps` in Next.js

In Next.js, pages are pre-rendered at build time using data objects returned by getStaticProps.

If one of the objects keys returned by getStaticProps function is different than revalidate, props, redirect or notFound, The Error: Additional keys were returned from getStaticProps. Properties intended for your component must be nested under the props key is thrown.

To resolve this error, object keys returned by getStaticProps function must have one of these values: revalidate, props, redirect or notFound.

export const getStaticProps = async () => {
	return {
		props: {
			name: 'Ali'
		},
		anotherKey: {
			blabla: 'hello'
		}
	};
};

In this sample, we return a props object with two keys, one with props and the other with anotherKey.

The error Additional keys were returned from getStaticProps. Properties intended for your component must be nested under the props key is then thrown.

The correct way to do it is

export const getStaticProps = async () => {
	return {
		props: {
			name: 'Ali',
			blabla: 'hello'
		}
	};
};

getStaticProps use

getStaticProps is used mainly to get props in a page using static generation, this function is an asynchronous function and works only on pages in Next.js

The return object should have specific format and return props which will be available for the page to use them.

The function that would use these props should be the default export in order for it to work and the syntax is like:

export default function Page(props) {
	return <div>the id is {props.id}</div>;
}

export const getStaticProps = async () => {
	return {
		props: {id: 1}
	};
};

Conclusion

We have seen how to solve the additional keys were returned in Next.js static generation, if you would love to learn more about Next.js, check this link