プログラミング勉強記録

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

Next.jsでWebアプリを作るために勉強を始めました。

今日の勉強内容をまとめたいと思います。

目次表示

目次へ

まずはNext.jsの環境構築から

私はnpmを使っているので以下のコマンドから、Next.jsの環境構築をしました。

TypeScriptを使ってみたかったので、TypeScriptを採用です。

npmが使えるようにすでにNode.jsをインストール済みだったので、簡単に環境構築できました。

npx create-next-app@latest --ts

UIコンポーネントライブラリにはMaterial-UIを採用しました。

以前使ったことがあったというのが採用の理由です。

以前使っていてデザインがきれいで特に不満もなかったのでまた採用しました。

インストール方法は以下から

Next.jsのサンプルコードは以下から

上記コードを使用してなんとかエラーなくインストールできました。

UIを作るのに色々調べていたら、Tailwind CSSの使用者が増えているらしいという情報がありました。

HeadlessCMSというのものを見つけました。

フロント部分をNext.jsやGatsby使って、バックエンドをWordPressなどのCMS を使うというもの。

管理画面などはWordPressの画面を使うので、使い慣れた画面を使えるのがメリット。

その他メリットとしては、表示速度やセキュリティの向上があります。

プラグインをいれたりすると、表示速度が遅くなりがちです。

フロント部分を静的サイトジェネレーターのNext.jsで表示すると、表示速度が改善されます。

テック系のブログでNext.jsで構築しているブログを見たことがありますが、表示速度が速い印象でした。

Next.jsでブログを作ろうと計画しているのですが、ブログの記事部分をMarkdownで書いていくという方法があることを知りました。

HTMLがマークアップ言語であるのに対して、Markdown記法というものがあります。

HTMLのようにたくさんのタグを覚える必要がありません。Markdown記法では簡単な記号（#や*の後に半角スペースをいれる）を使って、見出しやリスト、番号付きリストなどを、表現できます。

テキストファイルなのでファイルサイズも軽いです。

HTMLに変換することもできます。

https://www.sejuku.net/blog/78156