github-pagesにnext.jsをdeployすると写真が読み取れなくなる事についての対処

nextの写真が表示できなくなる事についての対処法

github-pagesにnextでdeployすると写真が表示できなくなる事についての対処法
ネットに日本語の情報がほぼほぼ無かったので、詰まった誰かの為に、、残します、

自分のファイル構成

.babelrc.js
.github
.gitignore
.next
env-config.js
next-env.d.ts
next.config.js
node_modules
package-lock.json
package.json
pages
public
README.md
tsconfig.json

以前はstaticというフォルダに画像などを入れるルールだったが
どこかのタイミングで変更になりpublicというフォルダに画像などの静的ファイルを入れます
私は、sitemap.xmlや引用する静的な物はなんでも入れました。

public

-images
  -main.jpg
  -header.jpg
-robots.txt
-sitemap.xml
-icon.jpg

publicフォルダ内は引用できるようになるが
srcの書き方は

<img src="/repository-Name/images/main.jpg" />
<img src="/repository-Name/icon.jpg" />

＊repository-Nameを各自のリポジトリの名前に変えてください

と書く必要があり、リポジトリ名/publicフォルダを飛ばして/その中のファイルを選択する

ただ、この書き方には難があり、ファイルの構造によって本番環境と開発環境で挙動が変わり、
開発時には画像を表示させることができない。

解決策

この変数を使う

process.env.NODE_ENV　=== 'production'

この変数は、開発環境と本番環境を判別してboolean型で返してくれる
本番環境だとtrueが開発環境だとfalseが返ってくる。

env-config.js

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  'process.env.BACKEND_URL': prod ? '/repository-Name' : '',
}

このようにして
本番環境だとリポジトリ名　　'/repository-Name'
テスト環境だと空白　　　　　'　'
が返ってきて、それを process.env.BACKEND_URL の変数に格納し外部にエクスポートしている。

それをindex.jsxなどにインポートして

index.jsx

const dir = String(process.env.BACKEND_URL)

<img src={dir+'/images/main.jpg'} />

このようにすることで
開発環境時は、'/images/main.jpg'、
本番環境では、'/repository-Name/images/main.jpg'
を作ることができ、本番環境と開発環境どちらでも写真を表示できる。