Next.jsをレンタルサーバーにアップする際の苦戦録

# Next.jsで作ったwebアプリをレンタルサーバーにアップしてみたい


はじめに、Next.jsの公式ではvercelでデプロイするのが推奨されています。
そしてNext.jsは学びたてのド素人です。

実務上レンタルサーバーにアップしてみたかったので、練習でやってみましたが、ちょっと苦戦したので記事書いてみました。

## まずはお馴染みのビルドから。
成功すると下記のような感じになります。
```
❯ npm run build

> hogehoge@0.1.0 build
> next build

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      4.56 kB        78.1 kB
├   └ css/1beb14451460885a.css             1.86 kB
├   /_app                                  0 B            73.5 kB
├ ○ /404                                   181 B          73.7 kB
├ λ /api/hello                             0 B            73.5 kB
└ ○ /products                              2.54 kB        76.1 kB
    └ css/bff950a31bfd5d70.css             1.34 kB
+ First Load JS shared by all              74.2 kB
  ├ chunks/framework-114634acb84f8baa.js   45.4 kB
  ├ chunks/main-010ff0b6bbe5ac8f.js        27.1 kB
  ├ chunks/pages/_app-1080b3660c618fe7.js  296 B
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/876d048b5dab7c28.css               706 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
```
いけましたね。

## 静的ファイルとしてエクスポートしなきゃいけないらしいのでやってみる

```
❯ npm run export
npm ERR! Missing script: "export"
npm ERR! 
npm ERR! Did you mean this?
npm ERR!     npm explore # Browse an installed package
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/****/.npm/_logs/2023-01-12T01_38_12_787Z-debug-0.log
```
失敗・・・
`npm run export`コマンドが違かったみたい・・・


## エクスポートする際は`npx next export`コマンドのようでした
ってことで改めてエクスポート！

```
❯ npx next export
info  - using build directory: /Users/***/Study/Original/hogehoge/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/Users/***/Study/Original/hogehoge/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.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /Users/***/Study/Original/hogehoge/node_modules/next/dist/export/index.js:153:23
    at async Span.traceAsyncFn (/Users/***/Study/Original/hogehoge/node_modules/next/dist/trace/trace.js:79:20)

```
しかしまたもや失敗・・・

## `Image Optimization using Next.js' default loader is not compatible with "next export".`という初めてみるエラー
ググってみると[こう書かれていた](https://zenn.dev/yuji/scraps/13c9845bcc13f9)。
> メッセージによると、画像最適化は、next export静的サイト生成に対応していないということでした。

要は下図のような`<Image>`は`<img>`に書き換えれば良いということ。
![スクリーンショット 2023-01-13 12.01.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1103633/68fe4c4d-57fd-19cf-a270-3e51a1d272de.png)

実際書き換えて再度エクスポートしてみました・・・・
しかし同じエラーが出現
```
❯ npx next export
info  - using build directory: /Users/***/Study/Original/hogehoge/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/Users/***/Study/Original/hogehoge/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.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /Users/***/Study/Original/hogehoge/node_modules/next/dist/export/index.js:153:23
    at async Span.traceAsyncFn (/Users/***/Study/Original/hogehoge/node_modules/next/dist/trace/trace.js:79:20)
```

さらにググってみると...
## 今度は`imgタグ`を使えるようにしなきゃいけないらしい
何をすればいいかというと`.eslinrtrc.json`もしくは`.eslintrc`を下記のように記述(top階層にあるファイルです)
```.eslintrc.json
{
  "extends": "next/core-web-vitals", 
   // ↓これを追記する！
  "rules": {
    "@next/next/no-img-element": "off"
  }
}
```

これで再度ビルド&エクスポート!
かならずビルドしてからエクスポートじゃないとダメっぽいのです！って当たり前か・・・

ではまずビルド！
```
❯ npm run build

> hogehoge@0.1.0 build
> next build

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      4.56 kB        78.1 kB
├   └ css/1beb14451460885a.css             1.86 kB
├   /_app                                  0 B            73.5 kB
├ ○ /404                                   181 B          73.7 kB
├ λ /api/hello                             0 B            73.5 kB
└ ○ /products                              2.54 kB        76.1 kB
    └ css/bff950a31bfd5d70.css             1.34 kB
+ First Load JS shared by all              74.2 kB
  ├ chunks/framework-114634acb84f8baa.js   45.4 kB
  ├ chunks/main-010ff0b6bbe5ac8f.js        27.1 kB
  ├ chunks/pages/_app-1080b3660c618fe7.js  296 B
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/876d048b5dab7c28.css               706 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)


```
からのエクスポート

```
❯ npx next export
info  - using build directory: /Users/***/Study/Original/hogehoge/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/Users/***/Study/Original/hogehoge/next.config.js". Generating map from "./pages"
info  - Launching 7 workers
warn  - Statically exporting a Next.js application via `next export` disables API routes.
This command is meant for static-only hosts, and is not necessary to make your application static.
Pages in your application without server-side data dependencies will be automatically statically exported by `next build`, including pages powered by `getStaticProps`.
Learn more: https://nextjs.org/docs/messages/api-routes-static-export
info  - Copying "public" directory
info  - Exporting (4/4)
Export successful. Files written to /Users/***/Study/Original/hogehoge/out

```

## `Export successful. Files written to /Users/***/Study/Original/hogehoge/out`こんな感じででれば成功です！
![スクリーンショット 2023-01-13 12.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1103633/1c3ffef8-44bb-eba4-c009-3fa315c4900d.png)

上図のようにoutディレクトリが生成されましたので、これをサーバーのルートディレクトリにアップするだけでokです！

## 以上

何か些細なことでもご指摘あれば是非お願い致しますm(_ _)m
記事の書き方が下手だ、とかでも・・・