#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'
を作ることができ、本番環境と開発環境どちらでも写真を表示できる。