sand97

//...

<Link href={`/loading/product?name=potato`}> 
    <button>Potato</button>
</Link>

//...

sand97

//...

<Link href={'/products/potato'}> 
    <button>Potato</button>
</Link>

//...

sand97

const Product = (props) => {
    return <div>
     { props.data.map(p => <div key={p.id}>{p.name}</div>) }
    </div>
}

export const getServerSideProps = async (context) => {
    const {name} = context.query
    //you can fetch data from your api like this
    // const res = await 

sand97

import { useRouter } from 'next/router'
import Head from 'next/head'

export default function Fact({ fact }) {
    const router = useRouter()
    return (
        <div style={{ textAlign: 'center' }}>
            <h1>A fact about cat</h1>
            <br/>
            <p>{fact}</p>

sand97

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

sand97

// server.js

const { createServer } = require('http');
const next = require('next');
const { promises, existsSync  } = require('fs');

const dev = (process.env.NODE_ENV || '').indexOf('production') === -1;

const app = next({ dev });
const handle = app.getRequestHandler();