├── .example.env
├── .gitignore
├── README.md
├── components
    ├── Header.js
    ├── ProductCard.js
    └── layout.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── api
    │   └── revalidate.js
    ├── index.js
    └── products
    │   └── [slug].js
├── postcss.config.js
├── prettier.config.js
├── public
    ├── favicon.ico
    ├── hero.jpg
    └── vercel.svg
├── styles
    └── globals.css
├── swell.js
└── tailwind.config.js


/.example.env:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_SWELL_STORE_ID=
2 | NEXT_PUBLIC_SWELL_PUBLIC_KEY=
3 | REVALIDATE_SECRET=
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | .env
33 | 
34 | # vercel
35 | .vercel
36 | 
37 | # typescript
38 | *.tsbuildinfo
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Swell / Next.js App
 2 | 
 3 | Learn how to create a headless ecommerce application using Swell and Next.js
 4 | 
 5 | ## Built With
 6 | 
 7 | - [Swell](https://swell.is/)
 8 | - [Tailwind CSS](https://tailwindcss.com)
 9 | - [Next.js](https://nextjs.org)
10 | - [Vercel](https://vercel.com)
11 | 
12 | ## Deploy with Vercel
13 | 
14 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnutlope%2Fnextjs-swell&env=NEXT_PUBLIC_SWELL_STORE_ID,NEXT_PUBLIC_SWELL_PUBLIC_KEY,REVALIDATE_SECRET&envDescription=API%20Keys%20from%20Swell%20needed%20to%20run%20this%20application.)
15 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | 
 3 | export default function Header({ scrollHandler }) {
 4 |   return (
 5 |     <header className="relative">
 6 |       <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
 7 |       <div className="mx-auto">
 8 |         <div className="relative shadow-xl sm:overflow-hidden">
 9 |           <div className="absolute inset-0">
10 |             <Image
11 |               priority
12 |               fill
13 |               className="h-full w-full object-cover"
14 |               src="/hero.jpg"
15 |               alt="People working on laptops"
16 |             />
17 |             <div className="absolute inset-0 bg-orange-100 mix-blend-multiply" />
18 |           </div>
19 |           <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
20 |             <p className="relative left-0 right-0 mx-auto mt-5 max-w-xl text-center text-xl  font-semibold uppercase tracking-wide text-orange-600">
21 |               The Coffee House
22 |             </p>
23 |             <h1 className="mt-1 text-center font-bold uppercase text-gray-900 sm:text-5xl sm:tracking-tight lg:text-7xl">
24 |               <span className="block text-white">Life is better with</span>
25 |               <span className="block text-orange-500">coffee</span>
26 |             </h1>
27 | 
28 |             <div className="mx-auto mt-10 max-w-xs sm:flex sm:max-w-none sm:justify-center">
29 |               <button
30 |                 className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-orange-600 shadow-sm hover:bg-orange-100 sm:px-8"
31 |                 onClick={scrollHandler}
32 |               >
33 |                 Shop coffees
34 |               </button>
35 |             </div>
36 |           </div>
37 |         </div>
38 |       </div>
39 |     </header>
40 |   )
41 | }
42 | 


--------------------------------------------------------------------------------
/components/ProductCard.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import Link from 'next/link'
 3 | import { useState } from 'react'
 4 | 
 5 | export default function ProductCard({ product }) {
 6 |   const [isLoading, setLoading] = useState(true)
 7 |   function cn(...classes) {
 8 |     return classes.filter(Boolean).join(' ')
 9 |   }
10 |   return (
11 |     <Link href={`/products/${product.id}`} className="group">
12 |       <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
13 |         <Image
14 |           alt=""
15 |           src={product.images[0].file.url}
16 |           fill
17 |           objectFit="cover"
18 |           className={cn(
19 |             'duration-700 ease-in-out group-hover:opacity-75',
20 |             isLoading
21 |               ? 'scale-110 blur-2xl grayscale'
22 |               : 'scale-100 blur-0 grayscale-0'
23 |           )}
24 |           onLoadingComplete={() => setLoading(false)}
25 |         />
26 |       </div>
27 |       <div className="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
28 |         <h3>{product.name}</h3>
29 |         <p>${product.price}</p>
30 |       </div>
31 |       <p className="mt-1 text-sm italic text-gray-500">
32 |         {product.options[0].values[0].name} calories
33 |       </p>
34 |     </Link>
35 |   )
36 | }
37 | 


--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
 1 | export default function Layout({ children }) {
 2 |   return (
 3 |     <>
 4 |       <main>{children}</main>
 5 |       <footer className="center mt-5 flex justify-center space-x-4 bg-[#E7E8EF] p-4 text-xs">
 6 |         <p>Powered by Next.js, Swell, and Vercel </p>
 7 |         <span>|</span>
 8 |         <a
 9 |           href="https://github.com/Nutlope/nextjs-swell"
10 |           className="font-medium text-orange-600"
11 |         >
12 |           Source code
13 |         </a>
14 |       </footer>
15 |     </>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 |   images: {
4 |     domains: ['cdn.schema.io'],
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "swell-nextjs-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start"
 8 |   },
 9 |   "dependencies": {
10 |     "swell-js": "^3.13.1"
11 |   },
12 |   "devDependencies": {
13 |     "@tailwindcss/aspect-ratio": "^0.4.0",
14 |     "@types/node": "17.0.4",
15 |     "@types/react": "17.0.38",
16 |     "autoprefixer": "^10.4.0",
17 |     "eslint": "8.13.0",
18 |     "eslint-config-next": "^13.1.3",
19 |     "next": "^13.1.3",
20 |     "postcss": "^8.4.5",
21 |     "prettier": "^2.5.1",
22 |     "prettier-plugin-tailwindcss": "^0.1.1",
23 |     "react": "^18.2.0",
24 |     "react-dom": "^18.2.0",
25 |     "tailwindcss": "^3.0.7",
26 |     "typescript": "4.5.4"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css'
 2 | import Layout from '../components/layout'
 3 | import Head from 'next/head'
 4 | 
 5 | function MyApp({ Component, pageProps }) {
 6 |   return (
 7 |     <>
 8 |       <Head>
 9 |         <title>The Coffee House</title>
10 |       </Head>
11 |       <Layout>
12 |         <Component {...pageProps} />
13 |       </Layout>
14 |     </>
15 |   )
16 | }
17 | 
18 | export default MyApp
19 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | class MyDocument extends Document {
 4 |   render() {
 5 |     return (
 6 |       <Html lang="en">
 7 |         <Head>
 8 |           <meta
 9 |             name="description"
10 |             content="The premiere coffee delivery service."
11 |           />
12 |           <link
13 |             href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
14 |             rel="stylesheet"
15 |           />
16 |         </Head>
17 |         <body>
18 |           <Main />
19 |           <NextScript />
20 |         </body>
21 |       </Html>
22 |     )
23 |   }
24 | }
25 | 
26 | export default MyDocument
27 | 


--------------------------------------------------------------------------------
/pages/api/revalidate.js:
--------------------------------------------------------------------------------
 1 | export default async function handler(req, res) {
 2 |   if (req.query.secret !== process.env.REVALIDATE_SECRET) {
 3 |     return res.status(401).json({ message: 'Invalid token' })
 4 |   }
 5 | 
 6 |   // Regenerate our index and product routes
 7 |   try {
 8 |     await res.revalidate('/')
 9 |     await res.revalidate(`/products/${req.body.data.id}`)
10 |     return res.status(200).json({ revalidated: true })
11 |   } catch (err) {
12 |     return res.status(500).send('Error revalidating')
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import ProductCard from '../components/ProductCard'
 2 | import swell from '../swell'
 3 | import Header from '../components/Header'
 4 | import { useRef } from 'react'
 5 | 
 6 | export default function Gallery({ data }) {
 7 |   let coffeeRef = useRef()
 8 | 
 9 |   const scrollHandler = (e) => {
10 |     e.preventDefault()
11 |     coffeeRef.scrollIntoView({
12 |       behavior: 'smooth',
13 |       block: 'start',
14 |     })
15 |   }
16 | 
17 |   return (
18 |     <>
19 |       <Header scrollHandler={scrollHandler} />
20 |       <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
21 |         <div className="sm:py-15 mx-auto max-w-7xl py-16 px-4 sm:px-6 lg:px-8">
22 |           <div className="text-center">
23 |             <p
24 |               className="mt-1 text-4xl font-bold uppercase text-gray-900 sm:text-5xl sm:tracking-tight lg:text-5xl"
25 |               ref={(element) => (coffeeRef = element)}
26 |             >
27 |               Crafted by us, for you
28 |             </p>
29 |           </div>
30 |         </div>
31 |         <div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
32 |           {data &&
33 |             data.results.map((product) => (
34 |               <ProductCard product={product} key={product.id} />
35 |             ))}
36 |         </div>
37 |       </div>
38 |     </>
39 |   )
40 | }
41 | 
42 | export async function getStaticProps() {
43 |   const swellProducts = await swell.products.list()
44 | 
45 |   return {
46 |     props: {
47 |       data: swellProducts,
48 |     },
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/pages/products/[slug].js:
--------------------------------------------------------------------------------
 1 | import swell from '../../swell'
 2 | import Image from 'next/image'
 3 | import { useRouter } from 'next/router'
 4 | 
 5 | export default function Product({ product }) {
 6 |   const router = useRouter()
 7 |   async function checkout(productId) {
 8 |     await swell.cart.setItems([])
 9 |     await swell.cart.addItem({
10 |       product_id: productId,
11 |       quantity: 1,
12 |     })
13 |     const cart = await swell.cart.get()
14 |     router.push(cart.checkout_url)
15 |   }
16 |   return (
17 |     <div className="flex h-screen flex-col justify-between">
18 |       <div className="mx-auto mt-16 max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
19 |         <div className="mx-auto flex flex-col sm:flex-row">
20 |           <Image
21 |             alt="coffee"
22 |             className="rounded-lg"
23 |             src={product.images[0].file.url}
24 |             width={560}
25 |             height={640}
26 |             objectFit="cover"
27 |           />
28 |           <div className="mt-10 flex flex-col sm:mt-0 sm:ml-10">
29 |             <h1 className="mt-1 text-4xl font-bold uppercase text-gray-900 sm:text-5xl sm:tracking-tight lg:text-5xl">
30 |               {product.name}
31 |             </h1>
32 |             <h1 className="mt-3 text-4xl font-bold text-gray-500 sm:text-3xl sm:tracking-tight lg:text-3xl">
33 |               ${product.price}
34 |             </h1>
35 |             <button
36 |               className="mt-5 rounded-md border border-transparent bg-orange-600 px-4 py-3 font-medium text-white shadow-sm hover:bg-orange-400 sm:px-8"
37 |               onClick={() => checkout(product.id)}
38 |             >
39 |               Checkout
40 |             </button>
41 |             <div className="mt-10 mb-5 border-t border-gray-200 pt-10 font-bold">
42 |               Description
43 |             </div>
44 |             <p className="max-w-xl">{product.description}</p>
45 |           </div>
46 |         </div>
47 |       </div>
48 |     </div>
49 |   )
50 | }
51 | 
52 | export async function getStaticProps({ params }) {
53 |   const swellProduct = await swell.products.get(params.slug)
54 |   return {
55 |     props: {
56 |       product: swellProduct,
57 |     },
58 |   }
59 | }
60 | 
61 | export async function getStaticPaths() {
62 |   const swellProducts = await swell.products.list()
63 |   let fullPaths = []
64 |   for (let product of swellProducts.results) {
65 |     fullPaths.push({ params: { slug: product.id } })
66 |   }
67 | 
68 |   return {
69 |     paths: fullPaths,
70 |     fallback: 'blocking',
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   singleQuote: true,
3 |   semi: false,
4 | }
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/nextjs-swell/8c6df2c4ca86d955d689b0f2d77ef9d95330ebb1/public/favicon.ico


--------------------------------------------------------------------------------
/public/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/nextjs-swell/8c6df2c4ca86d955d689b0f2d77ef9d95330ebb1/public/hero.jpg


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | * {
6 |     font-family: Montserrat, sans-serif;
7 | }
8 | 


--------------------------------------------------------------------------------
/swell.js:
--------------------------------------------------------------------------------
1 | import swell from 'swell-js'
2 | 
3 | const SWELL_STORE_ID = process.env.NEXT_PUBLIC_SWELL_STORE_ID
4 | const SWELL_PUBLIC_KEY = process.env.NEXT_PUBLIC_SWELL_PUBLIC_KEY
5 | 
6 | swell.init(SWELL_STORE_ID, SWELL_PUBLIC_KEY)
7 | 
8 | export default swell
9 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: [
3 |     './pages/**/*.{js,ts,jsx,tsx}',
4 |     './components/**/*.{js,ts,jsx,tsx}',
5 |   ],
6 |   plugins: [require('@tailwindcss/aspect-ratio')],
7 | }
8 | 


--------------------------------------------------------------------------------