npmコマンド一発でNext.jsのページのひな型を作成できるようにする

Next.jsのApp Routerを使用する場合、新しいページを作るにはURLに応じたフォルダを作成、その中にpageファイルを作り、Pageコンポーネントをデフォルトエクスポートする。

これをコマンド一発でできるようにする。

たとえば、パスが/blog/reactのページを作りたい場合は次のようなコマンドにする。


npm run createpage blog/react

まず、packge.jsonと同じディレクトリにscriptsディレクトリを作る。

その中にcreatePage.jsを作成し、次のように書く。


const fs = require('fs');
const directoryPath = './app/' + process.argv[ 2 ];
fs.mkdirSync(directoryPath, { recursive: true });
fs.writeFileSync(directoryPath + '/page.tsx',
` 
import  { memo, useState } from 'react';
import { Metadata } from "next/types";
import { Container, Paper } from "../../_components/mui";
export default function Page() {
    return (
        <Container disableGutters maxWidth='md'>
            <Paper
                sx={{
                    paddingX: { xs: 2, sm: 4 },
                    paddingY: 8
                }}
            >
              
            </Paper>
        </Container>
    );
}
export const metadata: Metadata = {
  title: '',
  description: '',
};`
), { flag: "wx" };

解説

ここではappディレクトリ以下に新しいディレクトリを作るようにしている。

process.argv[2]にはコマンドに渡した引数が入っている。

ちなみに、argv[0]にはnode.exeのパス、argv[1]にはcreatePage.jsのパスが格納されている。


const directoryPath = './app/' + process.argv[ 2 ];

'blog/react'といったパスでも再帰的に複数のディレクトリを作成できるようにrecursive: trueに設定する


fs.mkdirSync(directoryPath, { recursive: true });

writeFileSyncの第二引数にひな型を書く。

{ flag: "wx" }はファイルが存在しなければ新規作成し、存在していれば実行を中断させるためのフラグ。


fs.writeFileSync(directoryPath + '/page.tsx',
`
...
export default function Page() {
    ...
}`
), { flag: "wx" };

npmコマンドで実行できるようにpackage.jsonのscriptsにコマンドを追加する。


"scripts": {
    ...
    "createpage": "node scripts/createPage.js"
}

これでnpm run createpage aboutやnpm run createpage blog/reactのようなコマンドでひな型が作成される。