「クライアントエンジニアだけどサーバーサイド技術もやってみたい！」
というモチベーションから始めたこの企画。
「新技術15分チャレンジ」
エンジニアなので新しいことはキャッチアップしていかないといけない。
1日15分だったら好きなことしてイイっしょ！
というマインドの元、今回はNext.jsを触っていきたいと思います。
公式のチュートリアルを進めていきます。
If you don’t have Node.js installed, install it from here. You’ll need Node.js version 10.13 or later.
※バージョン10.13以降のNode.jsが必要です。
準備
- NodeJsのインストール
- npmのインストール
nextjs-blogというアプリを作成する
チュートリアルに従い以下のコマンドを実行します。
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
npx create-next-app アプリ名(nextjs-blog)コマンドを実行して
nextjs-blogというアプリを作成しています。
--exampleの意味
--exampleはテンプレートの利用を指しています。
今回は細かいことは抜きで先に行きます。
諸々処理が終了するとnextjs-blogというディレクトリが
作成されているため以下のコマンドで移動します。
$ cd nextjs-blog
以下のコマンドを実行します。
$ npm run dev
するとサーバーが立ち上がります。
ready - started server on http://localhost:3000 event - compiled successfully
http://localhost:3000にアクセスしてみます。
HelloWorldできた
サーバーが無事に立ち上がりHelloWorldできました。
次回
公式チュートリアルの通りページ内のカスタマイズをやってみます。
環境
- Node.js v14.7.0
- npm 6.14.8
- macOS Catalina 10.15.7