How to render multiple pages using getStaticProps, getStaticPaths and json file

Question

I am kind of new in all this stuff and I have a problem and I didn't have much of a luck in solving it.

I have multiple segments with different title and content and I want to render a page for each segment that I have with the exact name how is it called in my jsno file (for example: "mining-industry" the url will be /segment/mining-industry and there will be rendered content that is saved in "title" and "content").

I got hint from my friend that I should use getStaticProps and getStaticPaths but I don't understand how exactly it works.

This is my file /public/locales/en/segments.json: `

{
  "mining-industry":
    {
      "title": "Mining Industry",
      "content": [
        "The mining industry is one of the most demanding off-road segments. When it comes to load, weather conditions and intensity of use, machines and equipment soon reach their limits. In doing so, everything revolves around productivity and uptime. Machines consuming tens of kilograms of lubricant per week are rather the rule here. In addition, vehicles with a blind spot, when entire trucks disappear from the field of vision, are not unusual.",
        "Also in the mining industry, Groeneveld-BEKA products contribute greatly to increasing the efficiency of operating time, productivity and safety. This includes automatic lubrication, oil management, or safety systems. Groeneveld-BEKA provides the solution."
        ]
    },
  "processing-mining-industry":
    {
      "title": "Processing in the Mining Industry",
      "content": "Extracted raw materials must be modified for further processing in other industries. Therefore, the treatment of extracted raw materials is an important step in the supply chain. As with vehicles and excavators for mining operations, Groeneveld-BEKA plays a distinctly important role in this sector as well. Unplanned downtime caused by insufficient lubrication is extremely costly. In addition, these machines are used continuously, which means that manual lubrication is completely unthinkable."
    },
  "earth-construction-machinery":
    {
      "title": "Earth and Construction Machinery",
      "content": "For decades, Groeneveld-BEKA systems have been proving their value for earthmoving and construction machinery. In these fields, the operating times of the machines must be as long as possible. It is often the case that they are in operation 24/7, which means that there is simply no time left for proper day-to-day manual maintenance. Under these conditions, automation of the lubrication process and oil management is a logical consequence with a quick return on investment."
    },
  "forestry":
    {
      "title": "Forestry",
      "content": [
        "Forest management is a demanding seasonal job, in which weather conditions often create even greater time pressure. In addition, the work often takes place in remote areas. Therefore, ensuring the operation of the machine is of primary importance. Unplanned downtime is literally devastating for the smooth running of operations.",
        "This is precisely why the automatic maintenance and safety systems from Groeneveld-BEKA are also suitable for this demanding system in the sector. For example, automatic lubrication systems for wheel loaders and cranes. But also for harvesters and take-out tractors, for which Groeneveld-BEKA has developed special high-performance devices."
      ]
    },
}

`

And this is my file /pages/segments/[slug].tsx: `

import React from "react";
import { Header, Footer } from "@components";
import CurrPath from "@components/hero/currentPath";
import fs from "fs";

export async function getStaticPaths() {
    return {
        paths: [{ params: { slug: "mining-industry" } }],
        fallback: true,
    };
}
export async function getStaticProps() {
    const res = fs.readFileSync("public/locales/cs/segments.json", "utf-8");
    const data = JSON.parse(res);
    return {
        props: { data },
    };
}

const Segment: React.FC = ({}) => {
    return (
        <>
            <div className="opacity-10 segment-background"></div>
            <Header />
            <CurrPath />
            <div>
                <h1>Mining Industry</h1>
            </div>
            <Footer />
        </>
    );
};

export default Segment;

`

I tried to read official documentation at nextjs.org but I don't understand it completely.

So my question is how to render all dynamic routes with its content and evetually with its own pictures.

Thank you so much for helping me out.