1 page application with next.js

Question

i am bulding a project thats have only 1 page without routing, now i want to use getStaticProps.

so the only way, I can use getStaticProps its in my pages/index.tsx and its kinda annoying because the index.tsx getting bigger and bigger, theres any method to prevent that? and still have a single page project?

I tried to create new components like - pages/options and use getStaticProps there and render the pages/options in pages/index, but the data doesn't shown and i don't think its a good practice.

Answer 1

For the markup, I would recommend breaking the page down into display components (components that only render data) and passing them props from the page. To make your file cleaner, you could move the getStaticProps function to another file and then import it into pages/index.tsx like so -

import { fetchProps } from "../lib/fetchProps";

// ...

export const getStaticProps = fetchProps;