Passing parameters to component - dynamic route

[ghost]

Hello community I have a problem passing parameters from the dynamic path to my component, I'm using getStaticPaths and getStaticProps I'm following the documentation to the letter (I think..haha)
https://nextjs.org/docs/basic-features/data-fetching#fallback-pages

If I use some public API I don't have any problem (the parameters are passed correctly to my component) the problem is when I try to test with the URL of my site, I've tried using my localhost (I don't know if it's the ideal for testing) and the only thing I get is the legend "socket hang up" I don't know if I should deploy my site for everything to work properly.

From what I understand getStaticPaths will have the paths, in this case I use fallback true not to define all the paths that's why I need to trap the parameters of my path, now with getStaticProps it will get the parameters and pass them to my component.

Now I have doubts

Am I doing something wrong?
Am I putting getStaticProps and getStaticPaths to good use?
Am I misunderstanding the documentation?

I add my code in case something is not clear

export async function getStaticPaths() {

    return {

        paths: [
            { params: { param: '1' } }
        ],
        fallback: true
    };
}

export async function getStaticProps({ params }) {

    console.log(params)

    const res = await fetch(`   `) <= My URL
    const post = await res.json()

    return { props: { post } }
}

I'd really appreciate your help.

[leerob]

You're on the right track! Are you trying to fetch from an API route inside your Next.js application? If so, you can move that logic directly into getStaticProps since it's in the Node.js context (server-side).

In your current implementation, getStaticPaths has a bug. I'm guessing you have a dynamic route like pages/blog/[id].js that contains the code above. If you change getStaticPaths to:

export async function getStaticPaths() {
    return {
        paths: [
            { params: { id: '1' } }
        ],
        fallback: true
    };
}

It will now render a route at localhost:3000/blog/1 and forward the id value to the component. Inside getStaticPaths, you could fetch all your pages and then return a list of the IDs. For each ID, it will generate a new path.