Bolt.newでNext.jsを使い静的なウェブサイトを作る
Next.jsでビルドするときに工夫することで、root権限が無い一般的なレンタルサーバーに設置して運用できる静的なウェブサイトを作ることができることを知りました。
今回は、Bolt.newでNext.jsのフレームワークを使い、静的なウェブサイトを作る工程を試しました。
Bolt.newのトップページで、Next.jsのフレームワークをクリックして始めます。
ウェブサイトのビルドができたら、package.jsonにビルドスクリプトを追加します。
"scripts": {
"build": "next build && next export"
}
実際には、スクリプトが存在しており、その中にビルドが既に含まれているため、修正作業を行う流れとなります。
Bolt.newのターミナルで、ビルドのコマンドを実行します。
npm run build
ビルドできたプロジェクトを、ダウンロードします。
ダウンロードしたZIPファイルを解凍して、outという名前のファイルだの中身をFTPなどで、サーバーに転送します。
こちらが、テストで作ったウェブサイトの例です。
動画も作りましたので、ぜひ、見てください。
フレームワークを使う形で制作したウェブサイトは、サーバーに環境も作ることになります。
でも一般的なレンタルサーバーは、root権限が無いので、インストールができません。
そのことを動画で話すと意味が通じたのかもしれないですが、一応一般的なレンタルサーバーでは、Bolt.newやV0でビルドしたウェブサイトは、VPSやNetlify、vecelなどを使う形になります。
ただVPSは割高なので、簡易なウェブサイトの公開の場合は、Netlify、vecelなどを使うと良いと思います。
静的なデーターベースを使って表示しないウェブサイトなら
WordPressを使うほどでもない小規模の表示するのみのウェブサイト、会社やフリーランスのポートフォリオなどの場合は、Next.jsを使って制作したウェブサイトとしてビルドしてNetlifyで公開するのがコストもかからず更新も楽なので良いかなと思いました。
ウェブサイトの公開方法は、レンタルサーバーやVPSを使うだけでなく、他の方法もあります。
ビルドからホスティングまで一貫して行えるサービスを活用することで、生産性も向上すると思います。
Discussion