Posted by 
GRIPHONE Advent Calendar 2022 8日目の記事です。
グリフォンでWEBフロントエンジニアをしております 小山です。
移り変わりの早いWEBフロントのフレームワーク。
その中においてReactベースのフレームワークである「Next.js」はここ数年でトレンドというより、もはやデファクトスタンダートとなっている感があると思います。
しかしながらVueベースの「Nuxt.js」にどっぷりだった私はなかなか新しい方面に手が出せずにおりました…
そんな折にちょうどNext.jsに触れるチャンスが訪れたので、今回はNuxt.js→Next.js移行で、少々戸惑った部分を紹介していきます。
プロジェクト作成はほぼ同じ
Next.jsもNuxt.js同様、npxコマンドひとつで新規プロジェクトを作ることができます。これはわかりやすい。
作成↓
npx create-next-app@latestで、起動↓
yarn devこれでlocalhost:3000にアクセスすれば雛形プロジェクトが動いているのを確認できます。
layoutがない!?
ページ単位で大きくデザインを変更したい場合などにNuxt.jsでは「layout」を利用していましたが、Next.jsでプロジェクトを作成したところなんと「layout」ディレクトリがありません！(最近のNuxt.jsでも消えてた気がしますが)
Next.jsではレイアウトを用いたい場合、エントリーポイントとなるpages/_app.jsを少々加工しなければいけないようです。
export default function MyApp({ Component, pageProps }) {
const getLayout = Component.getLayout || ((page) => page);
return getLayout(<Component {...pageProps} />);
}storeもない!
Nuxt.jsでは状態管理のためにVuexが導入されており「store」ディレクトリにファイルを設置するだけで状態管理ができます。
Next.jsの場合はRedux、zustandなど様々な状態管理ライブラリが開発されており、開発者の好みやプロジェクト要件によって、その特性に合わせたものを選ぶことが可能です。
今回私はシンプルに使えそうなのでzusutandを使ってみることにしました。
(Reduxの方がよりメジャーな気はしますが、習熟に時間がかかりそうなのと、以前Reduxを使った案件に関わった際に「ファイル数が多くて複雑だなぁ…」と感じていたので利用を避けた部分もあります…)
まとめ
Nuxt.jsとNext.jsの違いで戸惑った部分はざっとこんな感じです！
その他ファイル内の記述で少々お作法が違う部分はありましたが、意外と頭の中で変換してその違いを吸収できております。
Next.jsに関する記事は今検索するとNuxt.jsより多く引っ掛かるような気もしてます。
現在Nuxt.jsをやってて「Next.jsもやらないとなぁ…」と感じている人は、意外とすんなり移行できると思いますのでこの機会に是非チャレンジしてみてください！
それでは明日の記事もお楽しみに！
