はじめに

ReactでSSR(Server Side Rendering)が可能なフレームワークであるNext.js。久しぶりに見てみると2020年1月15日にバージョン9.2を公開しており、個人的に嬉しい機能が追加されたということで紹介していきたいと思います。

この記事は公式ブログで紹介されている内容をまとめる形になるので、詳しい内容は公式ブログで確認してください。

新(?)機能まとめ

Built-in CSS Support for Global Stylesheets
Built-in CSS Module Support for Component-Level Styles

CSSを別ファイルからグローバルやコンポーネント単位のモジュールとしてのインポートが簡単になりました。

Code-Splittingの改善

ビルド時のコード分割を改善することにより、アプリケーションのサイズがかなり小さくなりました。

動的パスを全て取得

例えば/post/a/b/とパスが動的パスであるとき、/pages/post/[...slug].jsと[...name]シンタックスを使用することで、queryとして{ slug: ["a", "b"] }を得ることができ動的パスをまとめて取得することが可能になりました。

本記事では最初のBuilt-in CSSについて少し話して終わります。

Built-in CSSのサポート

今まで別ファイルのCSSを使用するには、以下のような手順が必要でした。

@zeit/next-cssのインストール。
next.config.jsを作成し、設定を記述。

2手間ではありますが、毎回設定するのであればさすがに面倒だと思います。さらに、このnext-cssにはある束縛がありました。それは

グローバルかローカルかどちらかしか選択ができない。

ということです。これらの問題を解決したのが今回のアップデートになります。
グローバルとローカルの区別は以下のようになります。

グローバル ... [name].css
ローカル ... [name].module.css

それでは、例を挙げていきます。

例: グローバル

public/style.cssを作成します。

public/style.css

body {
  padding: 20px 20px 60px;
  margin: 0;
}

h1{
  color: red;
}

アプリケーション全体で適用したいので、_app.jsxでこのファイルを読み込みます。

pages/_app.jsx

import '../public/style.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

そして、ホーム画面を用意します。

pages/index.jsx

export default () => {
  return (
    <>
      <h1>HOME</h1>
    </>
  )
};

すると...

ちゃんと赤色になってますね。要素を見てみると...

グローバルになってそうですね。

例: ローカル

pages/home.module.cssを作成します。

pages/home.module.css

.underline{
  border-bottom: 2px dotted black;
}

そして、pages/index.jsxを以下のように修正します。

pages/index.jsx

import styles from "./home.module.css"

export default () => {
  return (
    <>
      <h1>HOME</h1>
      <h1 className={styles.underline}>Welcome to Next.js 9.2!</h1>
    </>
  )
};

そうすると、しっかりアンダーラインが引かれて、またモジュールとして呼び出せていることがわかります。

おわりに

今回はNext.jsのバージョンアップに伴った更新点を紹介しました。
本記事ではBuilt-in CSSのみ紹介しましたが、他の機能も本格的なアプリケーションを作る際に助かるような内容になっています。ぜひ公式のブログにアップデートの内容が詳しく書かれているので読んでみてください。

Built-in CSSがサポートされました[Next.js 9.2更新情報]