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".という初めてみるエラー
ググってみるとこう書かれていた。
メッセージによると、画像最適化は、next export静的サイト生成に対応していないということでした。
要は下図のような<Image>は<img>に書き換えれば良いということ。
実際書き換えて再度エクスポートしてみました・・・・
しかし同じエラーが出現
❯ 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こんな感じででれば成功です！
上図のようにoutディレクトリが生成されましたので、これをサーバーのルートディレクトリにアップするだけでokです！
以上
何か些細なことでもご指摘あれば是非お願い致しますm(_ _)m
記事の書き方が下手だ、とかでも・・・