Next.js
これまで、Next.jsのプロジェクトをFirebase Hostingにデプロイするときは、Next.jsの設定を変更してURLの末尾にスラッシュをつけていました。blog.kimizuka.orgが。逆に、Firebase Hostingの設定を変更してURL末尾の.htmlを削除することができることを知り…
ツイッターの検索結果をウェブページに埋め込みたいとき、昔は公式のウィジェットがあったのですが、2018年に廃止されました。 でも、どうしても検索結果をウェブページに埋め込みたくて諸々調査した結果。Next.js + Vercel + Twitter API で割と簡単に埋め…
Firebase HostingにはGoogleアナリティクスとの連携機能がついています。firebase.google.com僕はこれまで連携機能を使ったことがなく、Firebase Hostingを使っていても、タグやnpmでアナリティクスを導入していたのですが、この度初めて使ってみました。連…
Adobe Fontsで日本語フォントをWebフォントとして使おうとすると、 <script> (function(d) { var config = { kitId: 'XXXXXXX', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b…
最近、Next.jsをつかってページスクロールを管理する実験を行ってます。Next.jsを使ってページスクロールに連動してクロールするサイトを作りました。https://t.co/Mdth7el9XS pic.twitter.com/LZwbleg1yv— 君塚史高 (@ki_230) 2021年1月15日 blog.kimizuka.…
最近は、もっぱらNext.js + styled-componentsでウェブサイトを作っております。 そんな折、動作原理を考えたら当然の挙動なのですが、一瞬ハマったのでメモを残します。 ことの発端 const BtnWrapper = styled.div` position: relative; width: 44px; heigh…
はじめに Next.js + GitHubPagesで静的サイトを公開する設定 については以前記事にしましたが、yarn exportによる書き出し自体は自動化していませんでした。blog.kimizuka.org今回は、以前の設定に加えて、push時に書き出しを自動化するところまで踏み込もう…
❶ _nextディレクトリが404にならないように、publicディレクトリに.nojekyllを追加する Nuxt.jsを使った場合と同じです。blog.kimizuka.orgGitHubPagesのデフォルトの設定では、こちらの通り、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で…
mobile Safariから音声を投稿する仕組みを考えていたところ、MediaRecorder APIたるものを発見しました。developer.mozilla.org当初は、 ボイスメモで録音（音声ファイルを生成） どうにかしてブラウザから音声ファイルにアクセス ファイルアップロード とい…
Next.jsとThree.jsでウェブサイトをつくったのですが、3Dモデルが重すぎるのでローディングをつくりました。blog.kimizuka.org以前、Reactのクラスコンポーネント用に作ったものを関数コンポーネントで書き直し、CSSをstyled-componentsで管理するように変更…
blog.kimizuka.org以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとダンスを踊るサイトをつくりました。kimizuka.github.ioNext.js + Three.jsでページスクロールに連動してダンスを踊るサイトを作りました。 https://t.co/0kkwD8lq…
ウェブサイトのルートが / じゃないときの設定方法です。 assetPrefixを、 next.config.js module.exports = { assetPrefix: '/hoge' }; という形にすれば、/hoge/ がルートになります。nextjs.orgNuxt.jsでいうところの、 export default { router: { base:…
Next.jsで/pages/about/index.tsx（もしくは /pages/about/index.js） をexportすると about.html になりますが、 /about/index.html にするためにはどうすればいいのかを探ってました。結論を先に書くと、next.config.jsのtrailingSlashをtrueにすればOKで…
blog.kimizuka.org以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとクロールするサイトをつくりました。kimizuka.github.ioNext.jsを使ってページスクロールに連動してクロールするサイトを作りました。https://t.co/Mdth7el9XS pic…
スクロールに連動してアニメーションを動かすサイトや、パララックスを実装する際、 ページのスクロール量（一番上から何%スクロールしているか） スクロールの方向 を管理すると、非常に楽に実装することができます。 今回はNext.js（React.js）のHooks API…
npmで探したら似たようなものがある気もしなくもないですが、すごくシンプルなものが欲しかったので自作しました。 process.browserを使っている点以外はNuxt.jsに依存しているところはないですが、Next.jsで使うことを前提に作ってます。 TypeScrtipt expor…
Nuxt.js + styled-componentsで開発をしているのですが、SCSSのような感じで、 SCSS ol { @for $i from 0 through 10 { li:nth-child(#{$i + 1}) { &:before { content: '#{$i}'; } } } } こちらをstyled-componentsに書き換えてみると、 styled-components …
Next.jsのプロジェクト作成方法 TypeScript導入方法 SCSS導入方法 styled-components導入方法 .babelrc Next.jsのプロジェクト作成方法 yarn create next-app app（以下のコマンドはappディレクトリ以下で行う） TypeScript導入方法 yarn add -D typescript …
