NextJSとTypeScriptで簡単なサイトを作ろう!!!~初学者向けです~

nextjs

こんにちは。KOUKIです。

NextJSTypeScriptに興味が出てきまして、勉強がてら備忘を記事に残したいと思います。

前提事項

Node.JSがローカルにインストールされていることを前提とします。

プロジェクトの作成

下記のコマンドで、プロジェクトを作成しましょう。

作成が完了したら、下記のコマンドでNextJSを起動します。

ブラウザを立ち上げて「localhost:3000」でアクセスしましょう。

上記の画面が表示されれば、OKです。

さあ、ワクワクのスタートです…

TypeScriptの設定追加

先ほどのコマンドを実行したときに、「tsconfig.json」ファイルが作成されます。

ここには、TypeScriptの設定がまとめられています。

設定の追加も可能です。例として「”strictNullChecks”: true」を設定しておきましょう。

フロントページの変更

pagesフォルダ配下のindex.tsxファイルが先ほど表示したフロントのページになるので、以下のように編集してみましょう。

フロントページのCSSの変更

stylesフォルダのHome.module.cssがフロントページのCSSになるため、変更しましょう。

フロントページのindex.tsxも少し変更します。

Componentの作成

次は、Componentを作成しましょう。

Header Componentには、以下のコードを実装しましょう。

続いて、フロントページのindex.tsxを変更します。

元々、フロントページに設定されていたHeaderをComponent化したので、他のページでも使いまわすことが可能になりました。

共通CSSについて

stylesフォルダ配下のglobals.cssは、NextJSアプリ共通に適用させるCSSを書くところみたいです。

試しに、背景及びテキスト文字の色を変更してみましょう。

結構簡単ですよね^^

importの絶対パスの設定

現状、他のモジュールを読み込むときは、相対パスになっています。

TypeScriptの設定で絶対パスに変更できるので、試してみましょう。

tsconfig.jsonに以下の設定を追加します。

componentsとstylesを対象にしました。

相対パスになっていたimportを絶対パスに変更しましょう。

Ctrl + CでNextJSサーバーを一旦Stopして、下記のコマンドでリスタートしましょう。

OKですね。

ナビゲーションの実装

サイトには欠かせないナビゲーションを実装しましょう。

HomeページとAboutページのナビゲーションを作成しました。続いて、CSSの実装を行います。

ここまで実装すると以下のナビゲーションが画面上に表示されます。

Aboutページはまだ作成していないので、アクセスすると404エラーのページが表示されます。

これは、NextJSが自動的に生成してくれるもので、実装等は行っていません。

すごく便利ですよね。

Aboutページを作成

Aboutページを作成します。

pages配下にaboutページを追加しました。pages配下にファイルを置くだけで、NextJSが良しなにルーティングしてくれます。

getStaticProps関数の実装

getStaticProps関数を実装します。

この関数は、アプリ(next-site)のビルド時にServer上で実行されるようです。

ページ上で表示したいデータをビルド時に取得し、そのデータを画面に表示させる、みたいなことができそうです。

ユーザーのPost情報を画面上に表示する処理を書きました。

getPostList関数は、このあと作ります。

getPostList関数の実装

以下のファイルを作成してください。

pages/postディレクトリを検索して、その中に格納れているファイル名を取得する処理を実装しました。

適当にファイルを作成します。

この状態で画面を表示してみます。

hello thereが表示されましたね。

hello-there.tsxの中身も実装します。

これをリストのリンクにして、ページ遷移できるようにします。

これで、「hello there」を押下するとページ遷移ができます。

画像を扱う

最後に、画像処理を実装しましょう。

ここに何か適当な画像を入れてみてください。

私は、「image1.jpeg」という名前で、下記の画像を入れました。

この画像を先ほど実装した「hello-there.tsx」で読み込みます。

Headタグを使うとページごとにTitleをつけられるので、便利です。

おわりに

NextJSのサイト作りを通して、基本的な機能を紹介できたと思います。

NextJSはReactのフレームワークですが、かなり使いやすくなっている印象ですね。

仕事でもガンガン使っていきたいと思います。

それでは、また!

参考

React記事まとめ


コメントを残す