back to nextjs images

Author: zamiang

README.md

@@ -13,7 +13,6 @@ This is a [Next.js](https://nextjs.org/) blog written in Typescript that uses [N
 - Robust eslint and prettier config
 - Supports all Notion blocks current supported by the API
 - Pages for photos and writing
-- imgix cdn for images (to reduce Vercel hosting cost and improve speed)
 
 ## Getting Started
 

components/article/render-article-block.tsx

@@ -1,7 +1,7 @@
+import Image from 'next/image';
 import React, { Fragment } from 'react';
 import { TwitterTweetEmbed } from 'react-twitter-embed';
 import { Text } from '../../components/article/text';
-import { Image, signImageUrl } from '../../components/image/imgix';
 import { Block } from '../../pages/writing/[id]';
 import styles from './block.module.css';
 
@@ -111,10 +111,9 @@ export const renderBlock = (block: Block, width = 640) => {
     case 'image':
       const url = value.type === 'external' ? value.external.url : value.file.url;
       const caption = value.caption && value.caption[0] ? value.caption[0].plain_text : '';
-      const { src, srcSet } = signImageUrl(url, width);
       return (
         <figure>
-          <Image src={src} srcSet={srcSet} alt={caption} width={width} />
+          <Image src={url} alt={caption} width={width} />
           {caption && <figcaption>{caption}</figcaption>}
         </figure>
       );

components/image/imgix.tsx

@@ -21,6 +21,10 @@ const nextConfig = {
     ];
   },
 
+  images: {
+    domains: ['s3.us-west-2.amazonaws.com'],
+  },
+
   async headers() {
     return [
       {

next.config.js

@@ -32,7 +32,6 @@
     "@types/react-router-dom": "5.3.2",
     "clsx": "1.1.1",
     "express": "4.17.2",
-    "imgix-core-js": "2.3.2",
     "next": "12.0.7",
     "next-compose-plugins": "2.2.1",
     "next-fonts": "1.5.1",

package.json

@@ -1,12 +1,12 @@
 import { QueryDatabaseResponse } from '@notionhq/client/build/src/api-endpoints';
 import Head from 'next/head';
+import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 import { useMeasure } from 'react-use';
 import { Text } from '../components/article/text';
 import Footer from '../components/homepage/footer';
 import Header from '../components/homepage/header';
-import { Image, signImageUrl } from '../components/image/imgix';
 import { getItemsFromDatabase } from '../lib/notion';
 import styles from './index.module.css';
 
@@ -28,19 +28,12 @@ const Photo = (props: { post: IProps['photos'][0] }) => {
   const url = (props.post.properties.Cover as any)?.files[0]?.file.url;
   const slug = (props.post.properties.Slug as any).rich_text[0]?.plain_text;
   const normalizedWidth = width < 297 ? 297 : width;
-  const { src, srcSet } = signImageUrl(url, normalizedWidth, normalizedWidth);
   return (
     <div className={styles.gridItem} ref={ref}>
-      {src && (
+      {url && (
         <Link href={`/photos/${slug}`}>
           <a className={styles.photoLinkImage}>
-            <Image
-              src={src}
-              srcSet={srcSet}
-              width={normalizedWidth}
-              height={normalizedWidth}
-              alt={title}
-            />
+            <Image src={url} width={normalizedWidth} height={normalizedWidth} alt={title} />
           </a>
         </Link>
       )}

pages/index.tsx

@@ -1,10 +1,10 @@
 import Head from 'next/head';
+import Image from 'next/image';
 import React from 'react';
 import { useMeasure } from 'react-use';
 import { Text } from '../../components/article/text';
 import Footer from '../../components/homepage/footer';
 import Header from '../../components/homepage/header';
-import { Image, signImageUrl } from '../../components/image/imgix';
 import { getBlocks, getItemsFromDatabase, getPageBySlug } from '../../lib/notion';
 import { photosDatabaseId } from '../index';
 import styles from '../writing/writing.module.css';
@@ -47,17 +47,9 @@ const renderBlock = (block: Block, width = 720) => {
     case 'image':
       const url = value.type === 'external' ? value.external.url : value.file.url;
       const caption = value.caption && value.caption[0] ? value.caption[0].plain_text : '';
-      const { src, srcSet } = signImageUrl(url, width, width);
       return (
         <figure>
-          <Image
-            width={width}
-            height={width}
-            src={src}
-            srcSet={srcSet}
-            alt={caption}
-            style={{ minHeight: 300 }}
-          />
+          <Image width={width} height={width} src={url} alt={caption} />
           {caption && <figcaption>{caption}</figcaption>}
         </figure>
       );