
## NextJS でブログ

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

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

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

## Static HTML Export

- [Static HTML Export](https://nextjs.org/docs/advanced-features/static-html-export)

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

```js
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

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

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

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

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

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


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


## :not ではなく

CSS で、最後の要素以外に適用したいという場合

```css
li:not(:last-child) {
  margin-right: 1rem;
}
```

とりあえず、こんな感じで書いてみたとする。

これを TailWindCSS で書く場合、どうするか？

:not はどうやらないらしいので、調べてみたところ以下の記事が出てきました。

- [last (:last-child)](https://tailwindcss.com/docs/hover-focus-and-other-states#last)

```jsx
<ul className="flex">
  {post.tags.map((tag) => (
    <li key={post.id} className="mr-4 last:mr-0">
      {tag}
    </li>
  ))}
</ul>
```

li 全体に mr-4 を適用した上で、last だけ mr-0 として、margin を適用させないというやり方っぽい。

## @apply

- [blog-starter（Github）](https://github.com/vercel/next.js/tree/canary/examples/blog-starter)

blog-starter のソースを見ていたら、@apply の記述があって、何だこれ？　となったので、調べてみました。

- [@apply](https://tailwindcss.com/docs/functions-and-directives#apply)
- [Extracting classes with @apply](https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply)

> If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

なるほど、ボタンやフォームなど小さい範囲で再利用可能なものに適用すると良さそうなのか…

## last-of-type

- [:last-of-type（mdn web docs）](https://developer.mozilla.org/ja/docs/Web/CSS/:last-of-type)

掲載されている last-of-type のサンプルコード

```html
<article>
  <div>This `div` is first.</div>
  <div>This <span>nested `span` is last</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`!</div>
</article>
```

css は以下の様になっています。

```css
article :last-of-type {
  background-color: pink;
}
```

これをブラウザで見てみると、結果の箇所と同じものが表示されました。

TailWindCSS の last-of-type で置き換えてみると…

```jsx
<article className="last-of-type:bg-pink-300">
  <div>This `div` is first.</div>
  <div>
    This <span>nested `span` is last</span>!
  </div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`!</div>
</article>
```

これをブラウザで見てみると、先の結果と同じではなく、article で囲まれたタグ内全て（の背景）がピンクになってしまいました…

単に置き換えるだけでは、駄目っぽいなぁ…


タイトル	投稿日時
NextJSとTailWindCSSでブログを作ってみる	2022-08-30
TailWindCSSのlast、@apply、last-of-typeを使ってみる	2022-07-13

TailWindCSSの記事、2件あります