feat: Add next/image custom loader example (#167)

* feat: Add next/image custom loader example

* chore: Remove redundant .gitignore files

README.md

@@ -44,6 +44,7 @@ Examples demonstrating how to use GraphCMS with popular application frameworks.
 | [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 i18n Routing](with-nextjs-i18n-routing)                 | How to use [Next.js Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing) with GraphCMS content                                                                                                                                     | https://graphcms-with-nextjs-i18n-routing.vercel.app       |
 | [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              |
+| [Next.js Image with Custom Loader](with-nextjs-image-loader)                               | How to use a [custom loader](https://nextjs.org/docs/api-reference/next/image#loader) function with [Next.js Image Component](https://nextjs.org/docs/api-reference/next/image) and GraphCMS assets                                                                                                                                                      | https://graphcms-with-nextjs-image-loader.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)                                         | This example demonstrates how to query from GraphCMS with graphql-request in React.js                                                                                                                                                                            | 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-loader/README.md

@@ -0,0 +1,37 @@
+# GraphCMS ⨯ Next.js Image Component with Custom Loader
+
+[Join our Slack](https://slack.graphcms.com)
+
+This example demonstrates how to use a [custom loader](https://nextjs.org/docs/api-reference/next/image#loader) function with [Next.js Image Component](https://nextjs.org/docs/api-reference/next/image) and GraphCMS assets.
+
+This allows you to perform [asset transformations](https://graphcms.com/docs/content-api/assets#transformations) using the GraphCMS CDN, rather than the default Next.js loader.
+
+> By using a custom loader, you will forgo the image caching provided by the default Next.js loader. Learn more [here](https://nextjs.org/docs/basic-features/image-optimization#caching).
+
+• [Demo](https://graphcms-with-nextjs-image-loader.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-loader)
+
+## How to Use
+
+### Download Manually
+
+```bash
+npx degit graphcms/graphcms-examples/with-nextjs-image-loader with-nextjs-image-loader
+```
+
+Install & Run:
+
+```bash
+cd with-nextjs-image-loader
+npm install
+npm run dev
+# or
+cd with-nextjs-image-loader
+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-loader)

with-nextjs-image-loader/next.config.js

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

with-nextjs-image-loader/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "graphcms-with-nextjs-image-loader",
+  "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.6",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "postcss-preset-env": "6.7.0",
+    "tailwindcss": "1.9.6"
+  }
+}

with-nextjs-image-loader/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-loader/pages/index.js

@@ -0,0 +1,56 @@
+import Image from 'next/image';
+import { GraphQLClient, gql } from 'graphql-request';
+
+function GraphCMSImageLoader({ src, width }) {
+  const relativeSrc = (src) => src.split('/').pop();
+
+  return `https://media.graphcms.com/resize=width:${width}/${relativeSrc(src)}`;
+}
+
+function IndexPage({ products }) {
+  return (
+    <div className="gap-6 grid grid-cols-1 md:grid-cols-3">
+      {products.map((product) => (
+        <div key={product.id}>
+          <Image
+            loader={GraphCMSImageLoader}
+            src={product.image.url}
+            width={400}
+            height={400}
+          />
+          <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-loader/postcss.config.js

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

with-nextjs-image-loader/styles/tailwind.css

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

with-nextjs-image-loader/tailwind.config.js

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