はじめに
こんにちは、リッキーです。
今回は、Next.jsを用いた簡単なWebアプリ画面を作っていきたいと思います。
よろしかったら読んでいってください。
まだ環境構築が出来ていないという方は前回の記事を参考にしてみてください。
>> https://rikki-hobby.com/nextjs-1/
サンプルコードを少し変更してみる
Next.jsのサンプルのうち、src->appの中にあるpage.tsxに画面の表示内容があります。
もっと具体的に言うと、5行目の<div>から、99行目の</div>までになっています。
この中で画面を作っていくのに最低限必要な内容を説明していきます。
Next.jsの使用言語について
まずはその前に、何の言語で書いていくのかという紹介をしたいと思います。
Next.jsは、TypeScript、CSSという2種類の言語で主に記述します。Webアプリ開発によく用いられる言語で、CSSは文字の色や背景色などページデザインを記述し、TypeScriptはそれ以外すべてを記述します。
TypeScriptファイルの形式はtsとtsxの2種類ありますが、Next.jsではtsxファイルを使います。
タグについて
Next.jsでは、タグの組み合わせで画面を作っていきます。
基本形式としては<[タグ名]>[内容]</[タグ名]>になります。他言語にはなりますが、HTMLで用いているものとほぼ同じです。
よく使うタグについて簡単にご説明します。
タグが異なってもデザインは変わらない場合もありますが、プログラムの見直しやすさのためにも、どのタグを使うかどうかは意識していくのがいいと思います。
– div … このタグ内に記載した他タグや文字列がそのまま表示されます。
– main … 画面内の主要な要素1つにつけます。
– footer … 画面下部の要素につけます。
– Image … 画像を表示することが出来ます。
– ol,li … 箇条書きで表示が出来ます。要素全体にolタグをつけ、個別にliタグをつけます。
– code … ソースコードを出したいときにつけます。
– a … 画面遷移をしたいとき使います。
シンプルな画面を作ってみる
Next.jsで画面を作成する際、divタグで以下のようなコードを実行してみてください。
<div>
なんてシンプルな画面なんだ
</div>
以下のような画面が表示されたら成功です。
「なんてシンプルな画面なんだ」部分を書き換えて再実行すると、表示を好きなように変えられます。色々試してみてください。
次回は、div以外のタグもたくさん試していこうと思います。
さいごに
Next.jsで、簡単なアプリ画面を作ってみました。
コメントいただけると励みになります。
ご覧いただきありがとうございました。
コメント