Next.js+Vercelでsitemap.xmlを用意する

前回 sitemap.xml を作成しましたが、Vercel(旧 Zeit / now)でうまく動かなかったので原因と解決方法を追記しておきます。

自サーバーで動かす分には問題ないです。

続きを読む Next.js+Vercelでsitemap.xmlを用意する

Next.jsでsitemap.xmlを用意する

Next.js でサイトマップを作る方法を探してみたけど、情報が全然出てこなかったので見つけた情報をつなぎ合わせてサイトマップを自動作成します。

 

sitemap.xml(サイトマップ)は検索エンジンにサイト内のクロールするWebページを教えるためのファイルです。なくても検索結果に出ないわけではないですが、現在だとあるに越したことはないくらいの印象。

続きを読む Next.jsでsitemap.xmlを用意する

Next.js+gray-matterのススメ

Gatsby だと時折見かける gray-matter ですが、Next.js でも非常に役立つので使い方と利点を書いておきます。

マークダウンでコンテンツを分けることを合わせて pages/ の負担を減らせます。

続きを読む Next.js+gray-matterのススメ

Next.jsで外部APIを叩く3つのパターン

WEBページを作る際に外部 API を使いたいことがあります。

Next.js で 外部API を叩く際にどうするか整理したので覚書き。

続きを読む Next.jsで外部APIを叩く3つのパターン

react-dropzoneの紹介と実装サンプル

Reactで使えるドラッグドロップのライブラリが非常に良かったのでメモ。

シンプルに使える上にできることが多い。

 

フレームワークとして Next.jsMaterial UI を使っています。

サンプルコードを少し変えつつ動かしてみます。

続きを読む react-dropzoneの紹介と実装サンプル

Next.jsをvercelにデプロイする

VercelNext.js プロジェクトをデプロイします。

公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。

実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。

続きを読む Next.jsをvercelにデプロイする

Next.jsでマークダウンを使ってコンテンツを分離する

Next.js + Material UI でコンテンツ部分にマークダウンを使うことを考えます。

メタデータ(Front-matter)を含むやつは今回は対象外です。

続きを読む Next.jsでマークダウンを使ってコンテンツを分離する

GLSLファイルをimportする

Next.jsgl-reactを使ってGLSLを使っていますが、文字列直書きなのが気になり始めたので.frag.vertなどのGLSLファイルに分けて管理しようと思います。

 

具体的にはwebpackのローダーを追加して読み込めるようにした覚書き。

他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabelでトランスパイルしてwebpackでバンドルしてると思います(主観)。

続きを読む GLSLファイルをimportする

【React】Nextでace.jsを使ってエディタ表示する

gl-reactを使ってGLSLでリアルタイムな画像処理がしたい。

ace.jsという有名なコードエディタがあるので使いたいですが、Reactでそのまま使うとなると難しそう。

バージョンは最新ではないもののReactコンポーネント化したreact-aceというものがあったので、その使い方とnext.jsで使う時の注意を覚書き。

続きを読む 【React】Nextでace.jsを使ってエディタ表示する

Next.js with Material-UIでスタイルが崩れる

Next.jsMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。

現象としてはnext.jsのPHASE_PRODUCTION_BUILDgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。

ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。

結構複雑な問題だったので要点をまとめながら解決を図ります。

環境:next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1

続きを読む Next.js with Material-UIでスタイルが崩れる