渋谷ほととぎす通信

Unity・ゲーム開発 技術で一生食べていく情報発信

【Next.jsチュートリアル】Next.jsでサーバーを立ててみる

「クライアントエンジニアだけどサーバーサイド技術もやってみたい!」

というモチベーションから始めたこの企画。

「新技術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できた

f:id:esakun:20210129032144p:plain:w450

サーバーが無事に立ち上がりHelloWorldできました。

次回

公式チュートリアルの通りページ内のカスタマイズをやってみます。

次回記事はコチラ

環境

  • Node.js v14.7.0
  • npm 6.14.8
  • macOS Catalina 10.15.7

参考資料