next.jsでポートフォリオサイトを作ってS3にデプロイする

$ git clone git@github.com:you/myportfolio.git

$ cd myportfolio
$ yarn
$ yarn dev

$ yarn build && yarn next export
...
info  - No "exportPathMap" found in "/Users/you/git/myportfolio/next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /Users/you/git/myportfolio/node_modules/next/dist/export/index.js:256:23
    at async Span.traceAsyncFn (/Users/you/git/myportfolio/node_modules/next/dist/trace/trace.js:75:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ touch tsconfig.json
$ yarn add -D typescript @types/react@18.0.1 @types/node

$ yarn dev

{
  "compilerOptions": {
    //..
    "baseUrl": "."
  }
  //..
}

$ yarn dev

type PropTypes = {
  src: string
  width: number
}
 
export const imageLoader = (props: PropTypes) => {
  const { src, width } = props
  return src
}
 
export default imageLoader

import Image from 'next/image'
import imageLoader from 'models/imageLoader'
 
<Image
  loader={imageLoader}
  src="/images/photo2.jpg"
  alt="Photo"
  width={1125}
  height={750}
  priority
  className="next-image"
/>
[Unsplash ↗ ](https://unsplash.com/photos/WeYamle9fDM)
 
<Image
  loader={imageLoader}
  src="/images/photo.jpg"
  alt="Photo"
  width={1125}
  height={750}
  priority
  className="next-image"
/>

const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js')
module.exports = withNextra({
  images: {
    loader: 'custom'
  },
  trailingSlash: true
})

import { NextPage } from 'next'
import Router from 'next/router'
import { useEffect, useState } from 'react'
 
// S3 + CloudFront構成でデプロイする場合は、CloudFrontで以下のカスタムエラーレスポンスを作成する必要があります
// - HTTPエラーコード: 404
// - レスポンスのページパス: /404/index.html
// - HTTPレスポンスコード: 200
//
// 参考: https://github.com/vercel/next.js/discussions/17711#discussioncomment-323735
const Custom404: NextPage = () => {
  const [isNotFound, setIsNotFound] = useState(false)
 
  useEffect(() => {
    const pathNames = window.location.pathname.split('/')
    if (pathNames[1] === 'tags') {
      Router.replace(window.location.pathname)
    } else {
      setIsNotFound(true)
    }
  }, [])
 
  if (isNotFound) return <h1>404 - Page Not Found</h1>
 
  return null
}
 
export default Custom404

module.exports = {
  siteUrl: 'https://shinagawa.app',
  generateRobotsTxt: true, // (optional)
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/404']
      }
    ]
  }
  // ...other options
}

$ yarn build && yarn next export
...
Export successful. Files written to /Users/you/git/myportfolio/out
✨  Done in 1.22s.

$ aws s3 sync --region ap-northeast-1 ./out s3://your-bucket --delete