これまでは、Yarn Workspacesの基本的な使い方 、Yarn Workspacesで複数のExpoプロジェクトを管理する方法 を記事にしてきました。blog.kimizuka.org blog.kimizuka.org今回は、Yarn Workspacesを使って複数のNext.js + Electronプロジェクトを管理します。 …

ページA、ページBに共通するコンポーネント（往復する■）を読み込んだ際、普通に実装するとページを遷移するたびに■の位置は初期値に戻るので、タイミングによってはワープしたように見えます。これをなんとかできないものかと調べてみたところ、Layoutsを使…

❶ Next.jsにnext-sitemapを導入し、サイトマップを生成する準備をする next-sitemapの導入 next-sitemap.config.jsの作成 package.jsonの編集 ❷ デプロイの度にサイトマップを自動生成するようにVercelのビルド設定を編集する ❸ Google Search Consoleにサイ…

リンクを作成する際に使うnext/link。 改めて仕様を確認してみました。nextjs.org ❶ テキストのみを渡す ソースコード レンダリング結果 ❷ hrefなしのaタグをラップ ソースコード レンダリング結果 ❸ spanタグをラップ ソースコード レンダリング結果 ❹ aタ…

Nuxt.jsではJestを使ったテストを作成していたのですが、Next.jsに導入したことがなかったので導入方法を調べました。 Next.jsのドキュメントにJestの導入方法がまとまっていたのでここを参考にしました。nextjs.org ライブラリの導入 yarn add -D jest @tes…

Cookieを使用する前に同意を取ることがスタンダードになりつつある昨今、Googleアナリティクスの対応を調べてみると、しっかりと対応してました。developers.google.com今回はgtag.jsを使いアナリティクスを設定されているサイトに対し、ユーザーが同意する…

これまで、Prettier導入済みのプロジェクトに参加したことはありましたが、自ら積極的に導入したことはありませんでした。prettier.ioしかし、最近、コーディングのルールを若干見直しまして、古い書き方と混ざるのが嫌なので、Prettierの力でコードを整える…

追記 Next.js 13以降での設定方法をまとめました。blog.kimizuka.org Next.js 12から導入されたミドルウェアを使って、Basic認証を設定するサンプルを見つけたので試してみました。nextjs.orggithub.com _middleware.ts import { NextRequest, NextResponse …

先日、自前でAPIを用意してShopifyのブログ記事一覧を取得しましたが、前回、商品一覧を取得する際にGraphQLの使いかたを学んだので、GraphQLで書き換えてみます。blog.kimizuka.org blog.kimizuka.org 手順 プライベートアプリを用意して、ストアフロントAP…

前回は、js-buy-sdk（shopify-buy）を使って商品一覧を取得しましたが、今回はGraphQLで取得します。 方法はいろいろあるのですが、GraphQLを扱いやすくするためにApollo Clientを使って実装しました。blog.kimizuka.org個人的には結果が同じであれば使い慣…

手順 プライベートアプリを用意して、ストアフロントAPIのアクセストークンを取得する help.shopify.comこちらの手順に従って、 プライベートアプリを用意する ストアフロントAPIを有効にする 商品、バリエーション、コレクションを読み込むの権限を付与する…

なにか根本的なところを間違えている気がしてならないのですが、強引な手法でShopifyのブログ記事一覧を取得できたのでメモを残しておきます。 結論 src/pages/api/getArticles.js import axios from 'axios'; export default async function getArticleList…

かつては自前でmicroCMSとNext.jsを組み合わせていましたが、SDKができたとのことだったので、つかってみました。Nuxt.js用のSDK、GatsbyJS用のSDKとフレームワーク専用で用意されているものもありますが、Next.jsは専用のものが無いので、Javascript（Node.…

先日、AR.js + Three.js + Next.jsでスマートフォン向けのウェブARをつくりました。3Dオブジェクトをブラウザ上に、3Dオブジェクトの影を現実空間に表示する、ウェブAR + プロジェクションマッピングを作りました。名付けて「影絵R（カゲエーアール）」です…

これまで、Next.jsでコンポーネントをインポートする際は、相対パスを使っていたのですが、コンポーネントを別のディレクトリに移動した際に、パスを書き換えなければならないこともしばしばありまして。Nuxt.jsのように「~」とか「@」を使う方法はないもの…

ことの発端 以前、Next.jsでSVGをコンポーネントのように扱う方法を調べました。blog.kimizuka.org今日もまた、いつものようにbabel-plugin-inline-react-svgを使ってSVGを読み込もうとしたのですが、 Error: Element type is invalid: expected a string (f…

Next 11を使ってウェブサイトを構築し、 yarn buildで書き出そうと思ったのですが、 Error: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts とエラーが出ました。指示さ…

ことの発端 めずらしいケースだとは思うのですが、最近、ステージングと本番のURLルートのパスが違う環境でNext.jsを使う機会がありました。ざっくりいうと、 本番 https:/kimizuka.fm/production/ ステージング https:/kimizuka.fm/staging/ みたいな感じで…

Next 11を使ってウェブサイトを構築し、 yarn buildで書き出そうと思ったのですが、 Error: Do not use . Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element. @next/next/no-img-element とエラーが出ました。指示…

Next.js + styled-componentsでウェブサイトを作り始めてから、ずーっと気になっていました。 ページ表示時に一瞬スタイルが当たってない状態が表示のが。が。ついに、その解決方法を見つけました。この、サーバサイドレンダリングを使えば解決します。style…

nextjs.orggithub.comすべては上記のドキュメントとサンプル通りなのですが、useRouterとrouter.eventsを使えば、ページ遷移時にコールバックイベントを設定することができます。 import { useRouter } from 'next/router'; export default function Page() …

<Link href="#hash"> hashchange </Link> というリンクをクリックしてhashを変化させた時、 window.addEventListener('hashchange', () => { console.log('hashchange!'); }); と、設定したハッシュチェンジイベントが発火せずにとても困っていました。※ next 10.1.3にて確認手っ取り早…

Nuxtでいうところの、nuxt-svg-loaderのようなパッケージを探していたのですが、公式のサンプルを参考に、babel-plugin-inline-react-svgを使うことにしました。github.com github.comNext.jsの設定、TypeScriptの設定をメモしておきます。 パッケージのイン…

useEffect で window.twttr.widgets.load を実行すればOKです。 declare global { interface Window { twttr: any } } export default function BtnTweet() { useEffect(() => { window!.twttr!.widgets!.load(); }, []); return ( <p className="btn-tweet"> </p>

※ next（10.1.2）とstyled-components（5.2.3）にて確認Next.jsとstyled-componentsを併用すると、yarn や npm install の際に、 warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0". というワーニングが出るので、若干…

結論 const blink = keyframes` 0% { opacity: 0; } 50% { opacity: 1 } 100% { opacity: 0; } `; と定義したアニメーション（blink）であれば、 blink.getName(); でアニメーション名を取得できます。 ことの発端 onAnimationEndを使って、アニメーションの…

Next.js + PixiJSでサイトをつくっていたとき、PixiJSをつかったコンポーネントを読み込もうとすると、 Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will be displayed in the term…

ことの発端 対策1（没案） 対策2（採用案） ことの発端 Next.js + PixiJSでサイトをつくっていて、 useEffect(() => { if (!app) { return; } app.loader.add('resource-1', '/resource/1.png') .load((loader, resources) => { setResources(resources); })…

これまで、Next.jsのプロジェクトをFirebase Hostingにデプロイするときは、Next.jsの設定を変更してURLの末尾にスラッシュをつけていました。blog.kimizuka.orgが。逆に、Firebase Hostingの設定を変更してURL末尾の.htmlを削除することができることを知り…

ツイッターの検索結果をウェブページに埋め込みたいとき、昔は公式のウィジェットがあったのですが、2018年に廃止されました。 でも、どうしても検索結果をウェブページに埋め込みたくて諸々調査した結果。Next.js + Vercel + Twitter API で割と簡単に埋め…