Skip to content

Instantly share code, notes, and snippets.

View estebanmunchjones2019's full-sized avatar

Esteban Munch Jones estebanmunchjones2019

View GitHub Profile
@estebanmunchjones2019
estebanmunchjones2019 / App.js
Last active March 18, 2021 11:58
Next.js article for eincode.com -- React demo code
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 (
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
estebanmunchjones2019 / [id].js
Last active April 1, 2021 18:17
subscription.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">
export async function getStaticProps(context) {
// some back end code here
return {
props: {}, // will be passed to the page component as props
}
}
export async function getServerSideProps(context) {
//some back end code here
return {
props: {}, // will be passed to the page component as props
}
}
// 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
};
// 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`});
}
//Background image example with <img>
<div className="pt-2">
<img src="/assets/images/unsplash-1.jpeg" style={{width: "100%", height: "auto"}}/>
</div>
//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>
import Image from 'next/image'