Migrate from next 12 to next 14 and cant find the approach to replace getStaticProps with App router

[RahulPhpDev]

As I have in next 12 projects getStaticProps it doesn't fetch data from any API, instead, it reads data from files and merges and combines data in a desired format. for an example:

export async function getStaticProps(context) {

const currentJourneyInfo = service.currentJourney(
        journies,
        slug,
       name
    );
    
    currentJourney (
        info,
        currentSlug,
        type
    )=> {
        let current= null;

        if (info[type])
            info[type].journeyData.forEach((group) => {
                const currentSlugItems = cloneDeep(currentSlug);
                const slugs= cloneDeep(group);

                const firstSlugSets = slugs.splice(
                    0,
                    slugs.indexOf(r + 1
                );
                const lastSlugSets = journeyGroupSlugs;
                const page= current[currentSlugItems.indexOf('page') + 1];
                const finalSlugSets = [...firstSlugSets, 'page', page, ...lastSlugSets];
                const journeySlugsLength = finalSlugSets?.length;
                currentSlugItems.splice(journeySlugsLength);
                journeyGroup.slugs = finalSlugSets;
                if (JSON.stringify(finalSlugSets) === JSON.stringify(currentSlugItems)) {
                    current= info[type];
                }
            });

        return current;
    },

}
    

this is just a demo what logic builds inside the getStaticProps (please avoid validate the code), and gets all this desired data at build time.

so how this possible with next 14 with App router, where I do not want to re generate this logic on every request.

I will be very grateful for the answer :)

[SouthLink]

When using APP routing, the concepts of CSR, SSR, SSG and ISR may be a little vague:

There are three different server-side rendering strategies in the APP router:

Static rendering
Dynamic rendering
Streaming

Static Rendering is used by default, which is either rendered at build time or in the background after revalidation, so you just need to convert your getStaticProps script to a server-side component to default to static rendering.

If dynamic functions or uncached data requests are used, Next.js switches to dynamic rendering

In Next.js these dynamic functions are:

cookies() and headers() : Gets cookies and headers
searchParams: page query parameter

You can verify this at build time

[RahulPhpDev]

Thanks, SouthLink,
your response is very helpful,

but I have the same question here again, like you said cookies() and headers() and be used,

but as you can see in my getStaticProps no API is calling, instead is generating logic for the object, how this is possible in App Router or do we have to stick with Page routes?

[SouthLink]

Writing like this will use static rendering by default, as in getStaticProps, and this part of the code and the data processing library you use will not be sent to the client, which is one of the benefits of server-side components, but you need to make sure that the libraries you introduce will be available when the server runs in next.js.

import React from "react";

const Page = async () => {
  const currentJourneyInfo = service.currentJourney(
  //  your code ...

  return <Component data={currentJourneyInfo} />;
};

export default Page;