nextjsへの移行の簡単なやり方

投稿日:2023/9/8

前提条件

html,css,jsで作成されたアプリケーションがあること(jQueryなどのライブラリーを使用している場合はそれらも含む。ただし、webpackなどを利用しており、そのままブラウザで表示できない場合は除く)
nodejsが入っていること
nextjsに移行したいと思っている

1# npmの場合
2npm install next react react-dom
3# yarnの場合
4yarn add next react react-dom
5# pnpmの場合
6pnpm add next react react-dom

その後、package.jsonのscriptsに次のように追加する

1{
2  "scripts": {
3    "dev": "next dev",
4    "build": "next build",
5    "start": "next start"
6  }
7}

次のようなディレクトリ構造にする

1/
2├── app
3│   ├── page.js
4│   └── layout.js
5├── public (古いファイルたちはこの中にすべてぶち込む)
6└── ... その他設定ファイルなど

layout.js

1export default function Layout({ children }) {
2  return (
3    <html lang="ja">
4      <body>{children}</body>
5    </html>
6  );
7}

1export default function Page() {
2  return (
3    <>
4      <h1>Hello World</h1>
5    </>
6  ); //ここにhtmlを書く;
7}

1# npmの場合
2npm run dev
3# yarnの場合
4yarn dev
5# pnpmの場合
6pnpm dev

github pageへのデプロイ方法はこちらを参考にしてください。。

このようにすることで既存のコードを残しながらnextjsに移行できます。