🦧

superplateでnext.jsとReactの環境を早く設定する方法

2 min read

"早くnext.js環境を設定したい"
と思っていた瞬間にSuperplateに会いました!

まだ日本語が下手で間違った文章が多いです。🙇‍♀️

はじめに

superplateはフロント開発環境を迅速に構築できるよう、最新フレームワークのボイラープレートを提供します.

現在はnext.jsとreactだけが提供されていますが、後にvue、nuxt、sveltも提供する予定です。

npx superplate-cli <project-name>

まずはsuperplate-cliを使ってプラグインを選択し、プロジェクトを作成します。
img

選択が終わたなら、基本的な環境設定が終わりました! 本当に簡単ですよね?🤩

追加で私はsuperplateで提供されていないemotionを使うので、インストールしました。

// emotion インストール
yarn add @emotion/core @emotion/styled @emotion/react @emotion/babel-plugin
// _app.tsx emotion 設定

import React from "react";
import { AppProps } from "next/app";
import { RecoilRoot } from "recoil";
import { globalStyles } from "@styles/global";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
    return (
        <RecoilRoot>
            {globalStyles}
            <Component {...pageProps} />
        </RecoilRoot>
    );
}

export default MyApp;

Superplateインストールが終わったら、ビルトインExample Directoryが提供されます。
一度参考にしてくださ。

project

Avaliable plugins

  • Package manager : Npm, Yarn
  • UI Frameworks : Tailwind CSS, Bootstrap, Chakra UI, Antd
  • CSS Preprocessors : CSS / styled-components, SASS / SCSS..
  • Features : Fetch, Axios, Storybook, SVGR, Enviroment Variables, Reverse Proxy, Bundle Analyzer, Apollo GraphQL, graphql-request
  • Hooks : SWR, React Query, React-Use
  • State Management : Redux + Redux Toolkit, Recoil, MobX
  • i18n : react-i18next
  • Linting tools : ESLint(build-in supoort), Lint staged files
  • Linters / Formatters : ESLint, Prettier..
  • Testing Frameworks : Jest, React Testing Library, Enzyme
  • E2E Testing Frameworks : Cypress, WebdriverIO
  • CI Tools : GitHub Actions, Travis CI

参考

公式サイト
Github

Discussion

ログインするとコメントできます