Zenn
💻

Next.jsのテンプレート、NextXを作成してみた。

2021/06/24に公開
Next.js
React
Storybook
TypeScript
tech

はじめに

はじめましてRiml と申します！
就活中の学生で好きなWebフロントエンドについて日々学習させて頂いております！
こういったサービスへのアウトプットが初めてなため、拙い文章になってしまうかもしれませんが投稿させていただきました！

今回なぜ公式のテンプレートも豊富なNext.jsのテンプレートを作成したかといいますと多くが併用して複数のライブラリ等の導入をしていなく、１ライブラリに関連するライブラリのみが含まれるものが多かったためです。

他にも色んな方々がNext.jsのテンプレートを公開されていますが私自身がよく使うライブラリを導入したテンプレートを用意できれば今後プロジェクトを立ち上げる際楽になるかな〜という意識のもと作成に至りました。

注意書き

独学で学んでいるため内容の間違いだったりもっといい方法があればコメント等でご教授してくださると嬉しいです！

この記事では以下のことについては扱いません。

導入ライブラリについての詳しい説明の補足

こちらはGithubの方でドキュメントを用意したため気になった場合はNextXのGithubのドキュメントを読んでくださると大まかな概要について知ることができます。

https://github.com/RimlTempest/nextx/blob/develop/README.md

さらに詳しく知りたい場合はライブラリ名を検索しますと公式のドキュメント等がでるのでそちらを読むようにお願いします！

作成したテンプレートの導入

コード一式はこちらにあります。
https://github.com/RimlTempest/nextx

テンプレートを導入

yarn create next-app --example https://github.com/RimlTempest/nextx

What is your project named? プロジェクト名を入力する

起動

cd プロジェクト名
yarn dev

起動後はhttp://localhost:3000にアクセスしましょう。

成功すると
NextX
このような画面が表示されます。

storybook起動

yarn storybook

起動後はhttp://localhost:6006にアクセスしましょう。

導入したライブラリ等

言語

  • TypeScript

フロントエンド関連

  • swr
  • next-seo
フロントエンド関連で苦労した点

swrのfetcherをuseSWRを呼び出し時毎回記述している記事が多くこれをどうにか共通化できないか調べたところSWRConfigというものを_app.tsxで呼んで以下のように設定することで解消できることがわかりました。

<SWRConfig
  value={{
      fetcher: (url: string) => axios(url).then((res) => res.data),
  }}
>
</SWRConfig>

UI周り

  • Tailwind
  • @headlessui/react
  • Storybook
  • reactTsparticles
UI周りで苦労した点

tailwindをstorybookに対応させようとしたところ

Error: PostCSS plugin tailwindcss requires PostCSS 8.

といったエラーが出たため公式のドキュメント通り

yarn remove tailwindcss postcss autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

することで解消しました。

フォーマッタ

  • ESLint
  • Prettier

Git関連

  • husky
  • lint-staged

API Routes関連

  • next-connect
API Routes関連

あまりAPI Routesの記事が見つからず公式通りの

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

のような書き方がnext-connectを用いることで

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";

const handler = nc<NextApiRequest, NextApiResponse>();

このようにhandlerを設定し

handler.get("/api/user", (req, res, next) => {
  res.json(req.user);
});
handler.post("/api/users", (req, res, next) => {
  res.end("User created");
});
handler.put("/api/user/:id", (req, res, next) => {
  // https://nextjs.org/docs/routing/dynamic-routes
  res.end(`User ${req.query.id} updated`);
});
handler.get((req, res, next) => {
  res.end("This matches whatever route");
});

書けるようになります！

今後の展望

CIやTestingフレームワークの導入を考えています。

他にもCustom Hook等の機能を使用したコンポーネント等を作成しNext.jsやReact.jsを試しで使いたい場合や学びたい人が使いやすいテンプレートにしていきたいと思います！

おわりに

長くなってしまいしたが参考になれば幸いです！
初投稿で内容が思いつかずわかりにくくなってしまっているかもしれませんので何かあればコメントのほうでアドバイスなどいただけると嬉しいです！

最後まで読んでいただきありがとうございました！

Discussion