Chakra UIにCSSのscroll-snapだけのライブラリなしカルーセルを実装する
Chakra UIにカルーセルを組み込もうとすると、うまく動かなかったり色々面倒だった。 ちょっとしたカルーセルであればCSSのscroll-snap-系のプロパティを使うことで解決できるので、これを組み込むことを考えた。 なお、今回画像はdog.ceoを利用させていただきた。 まずCSSだとどうなるのか？ 元となるCSSでの実装はこのような具合になる。 .slider{ width: 200px; height: 200px; overflow-x: scroll; align-items: center; flex-direction: row; scroll-snap-type: x mandatory; display: flex; } .slide-img{ width: 200px; height: 200px; object-fit: cover; scroll-snap-a
playwrightでnext.jsのcoverageまで取りたい
playwrightでnext.jsのテストを実行してcoverageまで取るのがわりと情報揃ってなかったのでまとめる。 手順の流れ 今回は、下記の手順を踏んでいく テストの準備対応 @playwright/testの代わりにplaywright-test-coverageを利用する カバレッジモードのnextの設定 nycを利用するnext.jsの起動モードを準備する(next.config.jsの設定) playwrightとnycをつなぐ playwrightからの起動時にnycを利用した起動モードを利用する 1. テストの準備対応 とりあえず普通にnext.js側のファイルを用意 // pages/index.ts import Head from 'next/head' import React, { useState } from 'react' export default
react18でtesting-libraryのwrapperにpropsを渡せない件の回避策
React18になり、testing-libraryのreact-hooksがdeprecatedとなった 基本的にはカバーされているのだが、下記のようにwrapperを利用した場合の挙動が変わっていた const Wrapper = ({children, ...props}) => { return <TestContainer {...props}> {children} </TestContainer> } test("Some test", () => { const { result,rerender } = renderHook(() => useCounter(),{ wrapper: Wrapper, initialProps: { foo: "baz"} }) rerender({ foo: "bar" }) }) このようなテストを書いた際、以前の@testing-l
tRPCとnext.jsの組み合わせで、withTRPCを使うほどでもない時のライトに使う方法
next.jsのAPI周りは気軽に使えて便利なのだが、型周りを考えるとちょこちょこ事故が起きやすい箇所になる。 tRPCを利用するとかなり堅牢なAPIを作ることができる ざっくりtRPCとnext.jsにおける利用について 軽くtRPCとnext.jsとの組み合わせについてかいつまむと、下記のような形になる 名前の通りTypeScriptを利用したRPCを行うためのライブラリ エンドポイントを一つに固定してクライアントでも利用することで型を共有できるもの next対応についてはUsage with Next.jsとしてドキュメント化されてるぐらいがっちりサポートされている next.jsの普通のAPIのルーティングとは異なるため、/api/trpc/[trpc]のような形でエンドポイントを一つに絞って利用する Contextのような機能もあって、複数のAPIの共通処理を一括管理できるところ
next.jsでモノレポツールを入れずに複数のサービス起動出来るようにしたい
next.jsで同じリポジトリを使いつつ複数の別なアプリケーションとして起動したいケースが度々有る。 この場合、殆どはturborepoやnxなどのmonorepoツールを利用する方法が広く知られている。 next.jsの公式でもMulti zoneの例ではmonorepoが利用されている 一方でmonorepoは各所対応してない場合があったり気を使う部分も多く、一定の覚悟を必要になる 今回モノレポツールを使わない、もう少しライトな方法を2つ思いついたのでそれぞれまとめていきたい ディレクトリごとにアプリを切り分け、ENVからの指定で切り替える webpackの設定を調整して依存関係を解決させる 1. ディレクトリごとにアプリを切り分け、ENVからの指定で切り替える こちらはnextのレールからほぼ外れないのでそれほど覚悟を必要としないやり方。 デメリットとしてURLにディレクトリが含まれ
なるべく怠けるAPI周りの型付け on next.js
管理画面や生存期間の短い試験機能など「あんまり頑張りたくないけどanyを多少減らす程度には型ほしい」みたいな時などにちょこちょこ使ってるテクニックが溜まってきたのでまとめてみる。 今回はnext.jsのAPIに絞って記述しているが、おそらく他でも使えるはず。 レスポンスの返り値をAwaited<ReturnType typeof someFunction>で怠ける APIのレスポンスが定まり切らなかったり流動的な部分で動的にする場合、Awaited<ReturnType typeof ...>の組み合わせが便利。 // こんな関数があるとして // const getFooData = async (id): FooData // const getBazData = async (id): BazData // 型を取れるようにレスポンスの関数を切り出し const someComple
Magicを使ったマジックリンクログインをReactでの素振りサンプルと感想
Magicというマジックリング認証に特化したサービスを知ったので素振りしてみた記録。 サーバーサイドまで含め入ったサンプルは公式のチュートリアルにある https://magic.link/guides 逆にSPAのようなクライアントログインの最低限パターンのサンプルが見当たらなかったので、素振りを書いてみた サンプル import { Magic } from 'magic-sdk' import { useState, useEffect } from 'react' // Dashboardに表示されたpublishable keyを持ってくる。これは公開してよいキー const MAGIC_LINK_PUBLIC = "pk_test_****************" // hooksに処理をまとめる const useMagicLogin = () => { const [is
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redux or Not Redux 〜Reduxが不要かもと思ったら〜
0-1. 要約版｜Redux or Not Redux 〜Reduxが不要かもと思ったら〜
nextjsで複数サイトをどう扱うか？