📝

NodejsでNextjsとReactのコンポーネントを作成するコマンドを作ってみた。

2023/05/01に公開

NodejsでNextjsとReactのコンポーネントを作成するコマンドを作ってみた。

NextjsとReactにはコンポーネントを自動で作成するLaravelのartisan のようなコマンドがなかったので、遊びのつもりで作ってみました。

インストール

npm i create-component-skelton

コマンドの書式は

npx create-component-skelton mode コンポーネントネーム...
npx create-component-skelton component Header Footer ...
npx create-component-skelton page Header Footer ...

モードは2つ

componentの場合は
/プロジェクトディレクトリ/src/components配下にHeader.tsx, Footer.tsx ....tsxが作成されます。

pageの場合は
nextjsのpagesディレクトリでの作成を想定しています。
/プロジェクトディレクトリ/src/pages配下にHeaderPage.tsx, FooterPage.tsx ...Page.tsxが作成されます。

同じ名前が存在している場合は作成はされません。

作成されるファイルのスケルトン

下記のファイルの
Component、Pageはコマンドで入力したコンポーネントネームに書き換わります。
PropsTypeは先頭にコンポーネントネームが自動で追加されます。

import React from 'react';
import { FC } from 'react';

interface PropsType {}

const Component: FC<PropsType> = () => {
  return (
    <></>
  );
};

export default Component;

import React from 'react';
import { FC } from 'react';

interface PropsType {}

const Page: FC<PropsType> = () => {
  return (
    <></>
  );
};

export default Page;

export const getServerSideProps = () => {
  return {
    props: {
      
    }
  };
};

使っていただけたら幸いです。
バグが見つかったら、コメントで教えてください
よろしくお願いいたします。

GitHubで編集を提案

Discussion