前回の記事で立てたブログをいじってみます。
前回記事
- Next.js v13
- Node.js v18
- easy-notion-blog v1.0.0
の環境です。（たぶん）
トップページの文言変更
デフォルトだとこんな感じですね。
app/page.tsx を変更すると良いみたいです。
import Link from 'next/link'
import { NEXT_PUBLIC_SITE_TITLE } from './server-constants'
import GoogleAnalytics from '../components/google-analytics'
import styles from '../styles/page.module.css'
const RootPage = () => (
<>
<GoogleAnalytics pageTitle={NEXT_PUBLIC_SITE_TITLE} />
<div className={styles.container}>
<div>
<h2>Welcome!</h2>
<p>Your easy-notion-blog deployed successfully!</p>
<p>Have fun!</p>
<p>
easy-notion-blog powered by{' '}
<Link href="https://github.com/otoyo/easy-notion-blog">
otoyo/easy-notion-blog
</Link>
</p>
</div>
</div>
</>
)
export default RootPageファビコンの設定
ファビコンは設定しておきたいですね。ちゃんとWikiに書いてありました。
public/ディレクトリ以下にfavicon.icoを配置してください。
ファビコンは16x16サイズが一般的っぽいです。
カスタムドメイン
Cloud Flareで管理しているドメインのサブドメインで設定しました。
https://takagi.blog/redirect-loop-error-with-vercel-and-cloudflare-dns/
参考: 高木のブログ Vercel + Cloudflare DNS でリダイレクトループエラー
最初リダイレクトループみたいな事象に陥りましたが、参考記事をもとにSSL/TLSモードをフレキシブルからフルにすると直しました。
URLのパスをpostsに変更する
デフォルトだと /blog/hogehoge といった形でブログのURLがblog配下になります。
完全に趣味の問題ですが /pogst/hogehogeの形式にしたいので変更します。
1. フォルダ変更
一旦こんな形で app/blog をコピーして posts フォルダを作成して
blogフォルダは削除します。↓
2. メニューのリンク先を変える
components/header.tsx のリンクを変更します。
//変更前
const navItems: NavItem[] = [
{ label: 'Home', path: '/' },
{ label: 'Blog', path: '/blog' },
]↓
//変更後
const navItems: NavItem[] = [
{ label: 'Home', path: '/' },
{ label: 'Blog', path: '/posts' },
]これでヘッダーメニューのリンクが変わります。
3. 記事一覧からのリンクを修正
Read moreなど記事へのリンクがまだ /blog/hogehoge に向いてるのでpostsになるように変更します。
lib/notion/blog-helpers.ts を編集します。
//変更前
export const getBlogLink = (slug: string) => {
return `/blog/${slug}`
}
export const getTagLink = (tag: string) => {
return `/blog/tag/${encodeURIComponent(tag)}`
}
export const getBeforeLink = (date: string) => {
return `/blog/before/${date}`
}
export const getTagBeforeLink = (tag: string, date: string) => {
return `/blog/tag/${encodeURIComponent(tag)}/before/${date}`
}この blog 部分を posts に変更すれば良さそうです。
↓
//変更後
export const getBlogLink = (slug: string) => {
return `/posts/${slug}`
}
export const getTagLink = (tag: string) => {
return `/posts/tag/${encodeURIComponent(tag)}`
}
export const getBeforeLink = (date: string) => {
return `/posts/before/${date}`
}
export const getTagBeforeLink = (tag: string, date: string) => {
return `/posts/tag/${encodeURIComponent(tag)}/before/${date}`
}4. シェアした際のURL（OGP周り）などを変更
記事をシェアした際のURLなどがまだblog側を向いてるのでpostsに変更します。
app/posts/head.tsx を編集します。 postsはさっきコピーして作ったフォルダです。
import DocumentHead from '../../components/document-head'
const BlogHead = () => (
// <DocumentHead title="Blog" path="/blog" />
<DocumentHead title="Blog" path="/posts" />
)
export default BlogHead補足ですが components/document-head.tsx の中でmetaタグを色々設定してあるみたいです。
OGPとGoogle Analytics（GA）の設定
↓結果現時点で環境変数がうまく動いてないけどいいや。。。ってことにしました。
GAの設定
Google Analyticsは最初に入れておきたいですね。
環境変数NEXT_PUBLIC_GA_TRACKING_ID
にトラッキングIDを設定することで有効化できます。
とのことです。
Vercelの管理画面から追加してみます。
ただこれだけだとうまくいかず…… OGPの問題も同様だったので後述。
ちなみに新規でGAプロパティ作ろうとするとユニバーサルアナリティクスはもうほぼ選択できない状態でした。
OGPの設定
OGPはOGImageに画像入れれば良さそう雰囲気でしたが、それだけではなく、 NEXT_PUBLIC_URL を設定する必要があります。
Vercel側で設定してみます。
ただこれだけでもうまくいかないという感じでした。
最初シェアデバッガーに画像が表示されませんでした。
Vercel側で環境変数が反映されない問題 ⇒ Promote to Production
何度かビルドしてもGAとOGPがうまくいかず
この二つの環境変数がうまく読み込めてなさそうな雰囲気でした。
- process.env.NEXT_PUBLIC_URL
- process.env.NEXT_PUBLIC_GA_TRACKING_ID
調べると以下の記事を見つけ、Vercel上で最新デプロイを選択して「Promote to Production」を選択してビルドしなおすと反映されました。
この辺はVercelのクセでしたね…
これでGAもOGPもうまく表示されました。
- 追記: やはりうまくいかない
デプロイしなおしたらまた環境変数が適用されなくなってしまった。
なんだろうなぁ。。。 面倒なのでapp/server-constants.js に直書きしましたが。。うまくいかない。
const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL || `https://nobi.suke.dev`
const NEXT_PUBLIC_GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID || `G-xxxxxxxx`ここちょっと不明なのでエントリー分けます苦
デプロイごとにうまく反映されるときとされない時があるっぽい。
Vercelのデプロイ周りの仕組みをちゃんと把握できてないけどその辺の挙動な気がしている。
その他
- easy-notion-blog側の更新に追随
僕が入った時がたまたまv1.0.0のタイミングでキリ番かもな100スターあたりでした。今後アップデートがあったときは更新します。