NextJSとTailWindCSSでブログを作ってみる

NextJSとTailWindCSSでブログを作ってみる

目次

NextJS でブログ

公式のチュートリアルが一通り終わったので、NextJS + TailWindCSS で簡単なブログを作ってみました。

デプロイ先は Vercel にしようかな？　と思ったんですが、頻繁に更新するものではないので、SSG（Static Site Generation）で十分かな？　と。

静的ファイルを作成し、契約しているサーバーに配置する事にしました。

Static HTML Export

上記ページを参考に、Static HTML Export を行いました。

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.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api

すると、エラーが…

next/image

記事を表示するページで、以下の様な記述をしていました。

import Image from "next/image";
（略）
return(
  <Image src={画像へのパス} alt={alt属性} layout="fixed" width={幅} height={高さ} />
)

Image コンポーネントが使えないみたいなので、調べてみると色々やり方はあるみたいですが、ひとまず img タグに置き換える事に…

（略）
return(
  <img src={画像へのパス} alt={alt属性} width={幅} height={高さ} />
)

これで export し直すと、静的ファイルを書き出す事が出来ました。