estebanmunchjones2019

import { Route, Switch} from 'react-router-dom';
 
import './App.css';
import  Home from './Home';
import About from './About';
import Contact from './Contact';
import Layout from './Layout';
 
function App() {
 return (

estebanmunchjones2019

import '../styles/globals.css'
import Layout from '../components/layout'

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Layout>
        {/* <Component /> represents each route's content */}
        <Component {...pageProps} />
      </Layout>

estebanmunchjones2019

export async function getStaticProps(context) {
  // some back end code here
  return {
    props: {}, // will be passed to the page component as props
  }
}

estebanmunchjones2019

export async function getServerSideProps(context) {
  //some back end code here	
  return {
    props: {}, // will be passed to the page component as props
  }
}

estebanmunchjones2019

// this code belongs to some dynamic route page, like /products/:id

export async function getStaticPaths() {
  // some back end code here
  return {
    paths: [
      { params: { ... } } 
    ],
    fallback: true or false 
  };

estebanmunchjones2019

// pages/api/subscription.js

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`});
}

estebanmunchjones2019

// 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">

estebanmunchjones2019

//Background image example with <img> 

<div className="pt-2">
   <img src="/assets/images/unsplash-1.jpeg" style={{width: "100%", height: "auto"}}/>
</div>

estebanmunchjones2019

//Example of a card image with <img>

<div className="card" style={{width: "18rem"}}>
  <img src="/assets/images/unsplash-1.jpeg" class="card-img-top" alt="..." />
  <div className="card-body">
    <h5 className="card-title">Card title</h5>
    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

estebanmunchjones2019

import Image from 'next/image'