ReactやNext.jsアプリにシームレスに統合できるシンプルで軽量なオープンソースのダミー画像生成ツール・「PlaceholderJS」 - かちびと.net
PlaceholderJS PlaceholderJSはReactやNext.jsアプリにシームレスに統合できるシンプルで軽量なオープンソースのダミー画像生成ツールです。 よくある従来のダミー画像生成サービスと同様に以下のようなフォーマットで任意のダミー画像を生成する事が出来る、というもの。 <img src="https://placeholderjs.com/500x500&text=Hello+World!&color=_FF0000&background=_000000"> 例えばNext.jsでは以下のように使います。 import { Placeholder } from "placeholder"; <Placeholder width="500" height="500" text="Hello World!" color="#FF0000" background="#00
Next.jsによるWebアプリ開発の入門書、『動かして学ぶ！Next.js/React開発入門』発売
本書はReactベースフレームワーク「Next.js」を利用したWebアプリ開発手法を解説した入門書です。フロントエンドとバックエンドの両方の開発手法について、Next.jsによるWebアプリ開発に精通する著者の三好アキさんが解説しています。 コードを1行1行書きながら、1つのWebアプリケーションを作成するプロセスを丁寧に解説しているので、初心者の方でも挙動を確認しながら安心して学習できます。 Next.jsを利用したWebアプリの開発手法を知りたい方におすすめの1冊です。 目次 Chapter 1 基礎知識と開発ツールの準備 Chapter 2 バックエンド開発の準備 Chapter 3 アイテム操作機能 Chapter 4 ユーザー登録とログイン機能 Chapter 5 バックエンドのデプロイ Chapter 6 フロントエンド開発の準備／ Reactの書き方／ サーバーコンポーネン
Next.js における レスポンシブの実装
フロントエンドエンジニアの茶木です。 前回 Next.js におけるレスポンシブ、画面幅でのコンテンツの出し分けについてSSRの観点も含めて考察しました。 今回は、考察結果を踏まえて実装を考えます。 おさらい前回の考察のおさらいです。 スタイルの変更は CSS Media Query が良い要素自体の描画切り替えは MUI useMediaQuery が良い以上が、レスポンシブの切り替えの方法のおすすめでした。 CSS Media queryReact では、DOMツリーの構造の変化をもとに再レンダリングが行われます。再レンダリングは高コストなのでDOMツリーの構造変化を伴わない、スタイルの変更は CSS Media Query による切り替えが最適と考えます。 グローバルCSSを使う方法 @media screen and (min-width: 1024px) { /* PC */ b
Next.js における レスポンシブの考察
フロントエンドエンジニアの茶木です。 Next.js におけるレスポンシブ、PC/SPの出し分けについてSSRの観点も含めて考察します。 具体的には、以下の切り替えについて、どのように実現するかについての考察です。 スタイリングの切り替え要素自体の描画を行うかどうかはじめにサーバーサイドレンダリング（SSR）Next.js はサーバーサイドレンダリング（SSR）をサポートしています。 SSRは、サーバー側で HTML を生成し、クライアントに返し表示することで、初期表示の高速化を実現します。 Next.js では、SSRは、クライアントサイドレンダリング（CSR）と混在させられます。基本的には SSRでレンダリングするべきなのですが、サーバーサイドで行えない、クライアントに依存した動的な表示を行う場合が存在します。 PC/SPの出し分け踏まえて、PC/SP の出し分けの判定について考えます
Next.js と TypeScript で学ぶイベント処理「e.target.value」 - コムテブログ
e.target.value とは？ e.target.value は、イベントが起きた要素の value 属性の値を取得することができます。 e はイベントを表し、target はイベントが発生した要素（ここでは入力要素）を指し、value はその要素の現在の値を指します。イベントオブジェクトの名前は任意なので、e 以外にも event、ev など、何でもよいです。 なんだか難しいですよね？e.target.value を理解するために、まず HTML のフォームと JavaScript の世界を少しご紹介します。 みんながよく見かけるウェブサイトには、様々な情報を入力するためのフォームがあります。例えば、ユーザー名を入力したり、パスワードを設定したり、お問い合わせのメッセージを書いたりしますよね。これらはすべて、ウェブページ上の「フォーム」という部分で行われます。 JavaScript
Next.js と TypeScript で、microCMS を導入する流れ - コムテブログ
microCMS の基本 microCMS とは、ヘッドレス CMS（Content Management System）の一つです。ヘッドレス CMS とは、フロントエンドとバックエンドが完全に分離された CMS のことを指します。これにより、データの入力と表示が分離され、任意のフロントエンドでデータを表示することができます。 microCMS は API によるデータの取得が可能で、これにより JavaScript のフレームワークである Next.js からデータを取得し、ウェブサイト上に表示することが可能となります。 microCMS でブログを作成する microCMS の管理画面に入ります。 管理画面の左 > コンテンツ（API）の「＋」をクリック > 「カテゴリ API」を作成 API 名 > 「ブログ」、エンドポイント名を「blog」と指定 API スキーマ > フィールド
Notion API（v0.4.4）で画像を扱う
以前の記事 で、「Notion APIが画像に対応してない」と書いたんですが、2021/8/15ぐらい？ にimageに実は対応していることが発見されました。 僕の個人ブログでも対応しようと思ってたんですが、８月、9月は手がつけられず、今月に入ってようやく着手しました。 前提 notion-sdk-js: 0.4.4 ※ これより前でもimageブロックを取ることはできると思います。たぶん…… あと個人ブログの記事ページはSSGで生成してます。 まだ変更があるのであまり大々的に発表してない？ そもそもimageブロックに対応した、という情報を得たのがTwitter経由で、公式のChangelogを漁ってもそれについての発表が見つけられませんでした。 記憶だと公式でも発表してたような気がしたんですが、気のせいだったかもしれません。 リリースは控えめですが、ドキュメントは↓のように更新されてい
ChatGPTに聞く：Next.jsでNotion APIを使ったお知らせページを作成
2023年10月20日 React, 便利ツール 自力でコードは書かず、ChatGPTを使ってToDoアプリを作っていた友人を見て、「何それ面白そう！」と思ってさっそく試してみました！今回は前から気になっていたNotion APIを使って、Next.jsでWebページ上にお知らせページを作っていきます。簡易ブログのようなものですね！ ↑私が10年以上利用している会計ソフト！ 完成形 お知らせ一覧ページにタイトルを表示し、クリックしたら詳細ページに飛ぶというシンプルなもの。制作時間は1時間くらいでしょうか。デザインはなしで、とりあえず表示だけを目指してみました。 コード全文はGitHubで公開しているので、似たようなものを作ろうと思っていた方は参考にしてみてください。ちなみにNext.jsに新規で追加したのは以下の5つのファイルだけです： utils/notions.js pages/api
テンプレートを使ってNext.js × Notion のブログサイトを作ってみよう
先日、自分のアウトプット用のインデックスサイト「Laid Back Code」をNext.jsとNotionで制作しました。 データは基本的にNotionで管理できるので、スマホからも気軽に編集したり投稿できたりするところが気に入っています。 本記事について Next.js×Notionで検索すると色々と記事が見つかると思いますが、本記事ではとりあえずどんな感じなのか触ってみたいという方向けに、シンプルなテンプレートを使ってブログサイトを実装する方法をご紹介します。（といってもREADME.md通りに進めるだけですが…） こんなサイトができます↓ Next.jsのテンプレは比較的TypeScriptやtailwindを使ったものが多いですが、今回使うテンプレではJavaScriptメインなのでとっつきやすいと思います！ Next.jsのセットアップ テンプレのREADME通りに進めます。
Next.js と TypeScript で、アコーディオンコンポーネントを作成 - コムテブログ
import { useState } from 'react' import styled from '@emotion/styled' interface AccordionProps { title: string content: React.ReactNode // ReactNode は、React の要素を表す型 closedIcon: string openedIcon: string } const AccordionButton = styled.button` width: 100%; height: 80px; background-color: #f1f1f1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border: none; cur
Next.js と TypeScript で、タブ切り替えコンポーネントを作る - コムテブログ
// components/Tabs.tsx import { useState } from 'react' import { css } from '@emotion/react' type TabProps = { tabs: string[] } const Tabs = ({ tabs }: TabProps) => { const [activeTab, setActiveTab] = useState(tabs[0]) return ( <div> {tabs.map((tab) => ( <button key={tab} onClick={() => setActiveTab(tab)} css={css` background-color: ${tab === activeTab ? 'blue' : 'white'}; color: ${tab === activeT
Next.js と TypeScript で、パンくずリストを実装する方法 - コムテブログ
import Link from 'next/link' import { useRouter } from 'next/router' type BreadcrumbItem = { text: string href?: string } type BreadcrumbProps = { items: BreadcrumbItem[] } const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => { const router = useRouter() return ( <nav aria-label="Breadcrumb"> <ol> {items.map((item, index) => { const isCurrent = index === items.length - 1 if (isCurrent || !
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: Next.js超入門: 掌田津耶乃: 本
Next.jsの考え方
Amazon.co.jp: Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた: 柴田和祈, 森茂洋, 野崎洋平, 千葉大輔: 本
Amazon.co.jp: 実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書: 吉井健文: Digital Ebook Purchas
Amazon.co.jp: Next.jsでつくるフルスタックアプリ 後編（フロントエンド開発）: 自分ひとりだけで本格アプリを開発できるようになる本 Next.jsフルスタック: 三好アキ: Digital Ebook Purchas
Amazon.co.jp: これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで: 山田祥寛: 本
Amazon.co.jp: 基礎から学ぶ Next.js: 大島祐輝: 本
GitHub - samuelkraft/notion-blog-nextjs: Next.js example blog powered by Notion Public API
