Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
Vercel VercelはNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。 VercelではちょっとしたWeb APIを用意したいときも、/apiディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。 Netlify サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.to
「CSSで蛍光ペンっぽいアンダーライン」はtext-decorationで実現できる
2022年現在、CSSでテキストに蛍光ペン風の下線を引く方法をググるとだいたいlinear-gradientを使った記事がヒットします。しかし、いまどきはlinear-gradientを使わなくてもtext-decorationで同じような表現ができるので紹介しておきます。 結論: こういうCSSをあてる /* セレクタ名はてきとう */ .highlight { text-decoration: underline; /* 下線 */ text-decoration-thickness: 0.5em; /* 線の太さ */ text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */ text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */ text-decoration-
Next.js の InferGetStaticPropsType が便利
Next.jsのサンプルリポジトリを眺めていたらInferGetStaticPropsTypeというものを見つけました。これを使うと、getStaticPropsでreturnされた値をもとに、Pageに渡されるPropsの型を類推してくれます。 ↓ ドキュメントはこちら これまではこんな感じで書いていた これまではPropsの型宣言を自分で書いていました。 import { GetStaticProps } from 'next'; // 👇 type Props = { posts: Post[] }; export const getStaticProps: GetStaticProps<Props> = async () => { const { posts } = await getPosts(); return { props: { posts, }, revalidate:
Next.jsのnext/imageコンポーネントの使い方と注意点
2020/10/27にNext.js 10がリリースされました。変更点は公式のブログがとても分かりやすくまとまっています。Next.js Confの動画をチェックするのも良いかもしれません（演出が良い感じです）。 Next.js 10で特に注目すべきは、画像最適化をしてくれるnext/imageコンポーネント（next/image）のビルトインサポートだと思います。この記事ではnext/imageについてまとめます。 next/imageとは next/imageは、画像の表示を最適化してくれるコンポーネントです[1]。 画像の最適化 具体的には、以下のような最適化を行ってくれます。 画像を閲覧デバイスに応じてリサイズして表示してくれる（元画像が大きくともスマホでは小さくリサイズされた画像を表示） PNGやJPEGなどの形式の画像を自動でWebPにしてくれる（しかもWebP対応ブラウザでの
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
Next.js + CSS ModulesでFOUC（CSSの適用遅れによるちらつき）が発生したときの暫定対策
Next.js v10.0.6時点の情報です。最新の情報はこちらのIssueを追うのが良さそうです。 https://github.com/vercel/next.js/issues/18769 Next.jsに根本的な原因があるかどうかはまだ確認できていません 発生していた問題 はじめて https://zenn.dev を読み込んだときに、一瞬スタイルがあたっていない状態で表示されてしまう問題が発生していました。 いわゆるFOUC（Flash of unstyled content）と呼ばれる現象です。少し遅れてスタイルがあたるため、ちらつき・がたつきが生じてユーザー体験がよくありません。 ちなみに発生する条件は以下です。 Next.js で CSS Modulesを使用（styled-componentsでは問題なし） 後述のIssueではstyled-jsxでも同じ問題が報告されて
Next.jsでページ共通の処理をする（useEffectを使う例）
Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScript） import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C
Next.jsで動的にRSSフィードを生成する
先日Next.jsでXML Sitemapを生成する方法を書きました。同じ要領でRSSフィードの実装もできるので記事にしておきます。 Next.jsのgetServerSidePropsで動的にRSSフィードを生成 Next.js（TypeScript）のPageコンポーネントの中で実装を行います。例として/feedにアクセスしたときにRSSフィードが表示されるように/pages/feed.tsxというファイルを作成します。 getServerSidePropsを使う理由 このサンプルでは、RSSデータの生成からレスポンスの返却までgetServerSidePropsの中で行います。getServerSidePropsは本来はPageコンポーネント内で使うpropsを取得するためのものですが、ここではpageコンポーネントを介さずに直接レスポンスを返却してしまいます。 というのもPageコ
Next.jsで動的にXMLサイトマップを生成する
2021年1月現在、Next.jsでXMLサイトマップを生成するライブラリとしてはnextjs-sitemap-generatorが最も人気のようです。 nextjs-sitemap-generatorのドキュメントを軽く読む限り、Next.jsのCustom Serverを使用してビルド時にサイトマップを生成する仕組みのようなので、以下のようなケースでの使用には最適とは言えません。 Custom Serverは触りたくない コンテンツ追加のタイミングでビルドが走らないユーザー投稿型のサイトでも、サイトマップを一定間隔で更新したい 個人的に色々と試してみたところ、思った以上に簡単にXMLサイトマップを動的に作ることができたので、その方法を共有します。 Next.js + TypeScriptで動的にXML Sitemapを生成する 以下のような方針で実装します。 sitemap.xmlをN
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsにCSS Modulesを導入する
CSSのtext-decorationで一部のテキストだけ下線を非表示にする
CSSでテキストが1行に収まるときだけ中央寄せする