subscription.js

[id].js

// pages/products/[id].js

import { getProduct, getProductsIds } from '../../actions'
import Link from 'next/link'


export default function ProductDetail({product}){
    return (
        <div className="container">
            <div className="row">
                <div className="col">
                    <h2 className="pt-5">{product.name}</h2>
                    <img
                    className="pt-5"
                    src={product.imageUrl}
                    alt={product.name}
                    style={{maxWidth: '400px'}}
                    />
                    <h4 className="pt-5 pb-3">{product.description}</h4>
                    <button className="btn btn-primary me-3">Buy now</button>
                    <button className="btn btn-primary">Add to cart</button>
                </div>
            </div>
            <div className="row pt-5">
                <div className="col">
                    <Link href="/">
                        <a className="text-primary"><u>Back to Home</u></a>
                    </Link>
                </div>
            </div>
        </div> 
    )
}

//hey Next, these are the possible id's
export async function getStaticPaths() {
    const paths = await getProductsIds()
    return {
        paths,
        fallback: false
    }
}

export async function getStaticProps({params}){
    console.log('params.id', params.id)
    const product = await getProduct(params.id);
    return {
      props: {
        product
      }
    }
  }

index.js

// pages/index.js

// import styles below, scoped to this component
import styles from '../styles/Home.module.css'

import { getProducts } from '../actions'
import { useState } from 'react'
import axios from 'axios'
import Subscription from '../components/subscription'

export default function Home({products}) {
  const [email, setEmail] = useState('');

  const inputChangeHandler = (event) => {
    const value = event.target.value
    setEmail(value)
  }

  const subscribeHandler = async () => {
    const subscriptionRes = await axios.post('http://localhost:3000/api/subscription', {email});
    alert(`${subscriptionRes.data.text}`);
    setEmail('');
  }

  return (
    <>
    <div className="container pt-5">
      <h1 className="text-center pb-3">Tea & Coffee shop</h1>

      {/* Products section starts */}
      <section>
        <div className="row">
          <Products products={products}/>
        </div>
      </section>
      {/* Products section ends */}

      {/* Subscribe section starts */}
      <section>
        <div className="row pb-5">
          <div className="col">
         <Subscription
         email={email}
         inputChangeHandler={inputChangeHandler}
         subscribeHandler={subscribeHandler}
          />  
          </div>
        </div>
      </section>
      {/* Subscribe section ends */}

    </div>
    </>
  )
}

// use getStaticProps whenever possible, so the content is pre-rendered at build time.
export async function getStaticProps(){
  const products = await getProducts();
  return {
    props: {
      products
    }
  }
}

// use getServerSideProps when data changes a lot and you need to get fresh content.
// The content is pre-rendered on the server side upon the client's request. 
// This is a slower option. If you uncomment this, and comment getStaticProps, the app
// should still work
// export async function getServerSideProps(){
//   const products = await getProducts();
//   return {
//     props: {
//       products
//     }
//   }
// }

subscription.js

// pages/api/subscription.js

// when deployed, this is a serverles function, callable at BASE_URL/api/subscription
export default function handler(req, res){
    //some code here to save the email to a database
    const email = req.body.email;
    return res.status(200).json({text: `${email} successfully subscribed`});
}