いい感じのUIをサクッと作れるReact用ライブラリ「Tremor」を使ってみた
プログラミング能力とUIのデザイン能力を両方兼ね備えているスーパーマンはともかく、一般的な開発者であればウェブアプリの開発時にUIのデザインで頭を悩ませた経験があるはず。もちろん、そうした需要に応えて世間にはさまざまなUIライブラリが存在しているわけですが、今回は「Tremor」というReact用UIライブラリで大きなアップデートがあったとのことなので、実際に使ってどんなUIが使えるのかを試してみました。 Tremor – The React library to build dashboards fast https://www.tremor.so/ Tremorを利用するためにはnode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https:
Next.js App Router (app ディレクトリ) の逆引き辞典
2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
Next.jsを勉強してみる その③ 〜入力チェック（バリデーション）編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は今まで構築した環境を使って、入力チェック（バリデーション）部分を手探りのままに作ってみたいと思います。 バリデーション処理をするためライブラリを探してみたところ、simple-react-validatorというなんとも組み込みやすそうなライブラリがありました。名前の通りsimpleであることに期待し、このライブラリを使ってチェック処理を実装したいと思います。 では、さっそく。 バリデーションに必要なものをインストール まず、simple-react-validatorを使用するため、nodeのルートディレクトリ(app)ターミナルで以下コマンドを実行します。 # simple-react-validatorをインストール # Next.jsのプロジェクトルートで実行すること npm install simple-react-validator --save login.tsxファイ
Next.jsを勉強してみる その② 〜画面作成編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。 右腕が折れても、意外と仕事ってできるもんですね。3ヶ月前に右腕の上腕骨を骨折したバックエンドエンジニアのやなさんです。 さて、前回はNext.jsの開発環境を構築する記事を書きました。 画面作成に必要なものをインストール 今回はTypeScriptで書いてみようと思うので、ターミナルで以下コマンドを実行します。 # typescriptで記述するので必要なライブラリをインストール # Next.jsのプロジェクトルートで実行すること npm install --save-dev typescript @types/react @types/react-dom @types/node コンポーネントで画面のひな形を作成 各画面を作成する前にひな形となるファイルを作成します。 今回の雛形にはheadタグやシステム共通となるヘッダー、フッターを定義しています。 ※ 画面のstyle
Next.jsを勉強してみる その① 〜何も考えず環境構築編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。LIGにジョインして5ヶ月経ちますが、コーディングしたステップ数はまだ100行に満たないバックエンドエンジニアのやなさんです。 とはいえ、私もエンジニア。現在の案件で採用されているNext.jsを勉強するため、勉強用の開発環境を構築することにしてみました。 Next.jsとは Zeit社が開発したユニバーサルなReactアプリの開発が可能なフレームワーク。よく比較されるフレームワークでいくとVue.jsを使って開発されたNuxt.jsなどがある。 今回はDockerを使って何も考えず、爆速（気分）で開発環境を構築してみようと思います。 とりあえず、立ち上げるまで頑張ってみる next.jsインストール # ルートディレクトリにsrcフォルダを作成・移動 mkdir src && cd src # Next.jsのアプリケーションの雛形を作成 $ npx create-next-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
