Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@MyPoZi

Nuxt.jsの動的ルーティングをNetlifyで行う方法(静的でSPA)

はじめに

ビルドしてdistに出力された静的ファイルをNetlifyにデプロイすると動的ルーティング出来ない!なんで!となったので、投稿します。
(SPAの定義は、Webページでアプリケーションを構成するなため、静的であり、SPAだと思ってます)

解決方法

最初に解決方法書きます

nuxt.config.js

  ...

  generate: {
    fallback: true
  },

  ...

これをnuxt.config.jsに含めるだけです。

解説

Nuxtでは、動的ルーティングは以下の画像のように _ を付けることで、できます。

image.png

動的ルーティングとは、

/users/hogehoge
/users/hugahuga
/users/1234
に対応できるということです。

その後、$ yarn generateで出力された.nuxt/router.jsには、以下の画像のように、動的ルーティングができています。

image.png

distも以下の画像のように静的ファイルが出力されています。動的ルーティングのディレクトリがないのは正常です。

image.png

しかし、Netlifyにデプロイした場合、Not foundとなります。
image.png

そこで、解決方法で示した

nuxt.config.js

  ...

  generate: {
    fallback: true
  },

  ...

をnuxt.config.jsに追加してビルドすると、

image.png

成功するんですよね。

理由はNetlify へデプロイするには? - NuxtJS

シングルページアプリケーションの場合、Netlify は再読み込み時にデフォルトで "404 not found" にリダイレクトする問題があります。生成されないページについては、SPA モードにフォールバックし、そのリンクを更新または共有すると、Netlify の 404 ページが表示されます。なぜならシングルページアプリケーションなので実際には生成されたページが存在しないからです。更新すると url のページが実際に存在しないため 404 になります。404.html にリダイレクトすることにより、Nuxt は SPA フォールバックでページを正しくリロードします。

と書いてありますが、分かりやすく解説すると、

存在しないページはdist内の404.htmlにリダイレクトして、Nuxtが自動で動的ルーティングしてくれる

です。

おわりに

読めば分かることなんですが、

SPAとは?
Node.js必要じゃない?
出力された静的ページは大丈夫なんだけど!?

みたいに悩んだので、記事にしました。

このページにたどり着いて、解決することが出来たなら私は嬉しいです。

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What is going on with this article?