feat: Add Next.js Image Component example (#160)

* feat: Add Next.js Image Component example

* docs: Fix URL

README.md

@@ -34,6 +34,7 @@ Examples demonstrating how to use GraphCMS with popular application frameworks.
 | [Gridsome](with-gridsome)                    | A basic example using `gridsome create` CLI and [`@gridsome/source-graphql`](https://www.npmjs.com/package/@gridsome/source-graphql)                                                                   | https://graphcms-with-gridsome.now.sh                         |
 | [MDX (with Next.js)](with-nextjs-mdx-remote) | This example demonstrates how to use markdown fields from GraphCMS with `MDX` in Next.js                                                                                                               | https://graphcms-with-nextjs-mdx-remote-ynnoj.graphcms.now.sh |
 | [Next.js](with-nextjs)                       | A basic [Next.js](https://nextjs.org) application, featuring `getStaticProps` and `getStaticPaths` to build static product pages                                                                       | https://graphcms-with-nextjs.now.sh                           |
+| [Next.js Image](with-nextjs-image)            | How to use [Next.js Image Component](https://nextjs.org/docs/api-reference/next/image) with GraphCMS assets                                                                                                      | https://graphcms-with-nextjs-image.vercel.app                     |
 | [Nuxt.js](with-nuxtjs)                       | A simple Nuxt.js starter using `create-nuxt-app` CLI with Tailwind and Axios added                                                                                                                     | https://graphcms-with-nuxtjs.now.sh                           |
 | [React.js](with-reactjs)                     | [`create-react-app`](https://github.com/facebook/create-react-app) example that uses [`apollo-client`](https://github.com/apollographql/apollo-client) to build a blog                                 | https://graphcms-with-reactjs.now.sh                          |
 | [Vue.js](with-vuejs)                         | A vanilla Vue.js starter using `vue create` CLI with Vue Router                                                                                                                                        | https://graphcms-with-vuejs.now.sh                            |

with-nextjs-image/README.md

@@ -0,0 +1,33 @@
+# GraphCMS ⨯ Next.js Image Component
+
+[Join our Slack](https://slack.graphcms.com)
+
+This example demonstrates how to use the [Next.js Image Component](https://nextjs.org/docs/api-reference/next/image) with your GraphCMS assets.
+
+• [Demo](https://graphcms-with-nextjs-image.vercel.app)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/GraphCMS/graphcms-examples/tree/master/with-nextjs-image)
+
+## How to Use
+
+### Download Manually
+
+```bash
+npx degit graphcms/graphcms-examples/with-nextjs-image with-nextjs-image
+```
+
+Install & Run:
+
+```bash
+cd with-nextjs-image
+npm install
+npm run dev
+# or
+cd with-nextjs-image
+yarn
+yarn dev
+```
+
+### Run on Codesandbox
+
+[![Develop with Codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/GraphCMS/graphcms-examples/tree/master/with-nextjs-image)

with-nextjs-image/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['media.graphcms.com'],
+  },
+};

with-nextjs-image/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "graphcms-with-nextjs-image",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "graphql": "15.4.0",
+    "graphql-request": "3.3.0",
+    "next": "10.0.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "postcss-preset-env": "6.7.0",
+    "tailwindcss": "1.9.6"
+  }
+}

with-nextjs-image/pages/_app.js

@@ -0,0 +1,11 @@
+import '../styles/tailwind.css';
+
+function App({ Component, pageProps }) {
+  return (
+    <div className="max-w-5xl mx-auto p-6">
+      <Component {...pageProps} />
+    </div>
+  );
+}
+
+export default App;

with-nextjs-image/pages/index.js

@@ -0,0 +1,49 @@
+import Image from 'next/image';
+import { GraphQLClient, gql } from 'graphql-request';
+
+function IndexPage({ products }) {
+  return (
+    <div className="gap-6 grid grid-cols-1 md:grid-cols-3">
+      {products.map((product) => (
+        <div key={product.id}>
+          <Image
+            src={product.image.url}
+            width={product.image.width}
+            height={product.image.height}
+          />
+          <h2 className="font-semibold text-lg">{product.name}</h2>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  const graphcms = new GraphQLClient(
+    'https://api-eu-central-1.graphcms.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master'
+  );
+
+  const { products } = await graphcms.request(
+    gql`
+      {
+        products {
+          id
+          image {
+            height
+            url
+            width
+          }
+          name
+        }
+      }
+    `
+  );
+
+  return {
+    props: {
+      products,
+    },
+  };
+}
+
+export default IndexPage;

with-nextjs-image/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['postcss-preset-env', 'tailwindcss'],
+};

with-nextjs-image/styles/tailwind.css

@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@tailwind base;
+@tailwind components;
+/* purgecss end ignore */
+@tailwind utilities;

with-nextjs-image/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  purge: ['./pages/**/*.js'],
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+};