よく使う文字列を定数にして使いまわしたい

[kagomen]

よく使う文字列を定数にして使いまわしたいです。
具体的には、

• サイトタイトル
• サイトURL
• サイトの説明文

などでしょうか。
今後OGPの設定もするとなったら、より必要になってくるかな、と。

ザッと調査したところ、constants.tsファイルを作成して記述するのが一般的っぽい？
ChatGPTにnext.config.jsで定義するのはどうか質問したら、できるけど一般的ではないと回答がありました。

もしみなさんがよろしければファイル作成して定数定義しようと思うのですが、何かご意見やアドバイス等あればお聞かせ願いたいです！

参考
【フロントエンド】Next.jsの全体設定
Next.jsのディレクトリ構成を考えてみた -Zenn

[kagomen]

技術ブログを調べるよりオープンソースのディレクトリ参考にする方が早いかも

オープンソースのReact / Next.js製Webアプリまとめ -Zenn
上記の記事で紹介されている Virtual Event Starter Kit というサイトのソースコード見てみた

ルートディレクトリにlib/constants.ts作って以下のように設定してる模様

export const SITE_URL = 'https://demo.vercel.events';
export const SITE_ORIGIN = process.env.NEXT_PUBLIC_SITE_ORIGIN || new URL(SITE_URL).origin;
export const TWITTER_USER_NAME = 'vercel';
export const BRAND_NAME = 'ACME';
export const SITE_NAME_MULTILINE = ['ACME', 'Conf'];
export const SITE_NAME = 'ACME Conf';
export const META_DESCRIPTION =
  'This is an open source demo that Next.js developers can clone, deploy, and fully customize for events. Created through collaboration of marketers, designers, and developers at Vercel.';
export const SITE_DESCRIPTION =
  'An interactive online experience by the community, free for everyone.';
export const DATE = '01 January 2022';
export const SHORT_DATE = 'Jan 1 - 9:00am PST';
export const FULL_DATE = 'Jan 1st 9am Pacific Time (GMT-7)';
export const TWEET_TEXT = META_DESCRIPTION;
export const COOKIE = 'user-id';

https://github.com/vercel/virtual-event-starter-kit/blob/main/lib/constants.ts

[kazzyfrog]

App Routerの設定と組み合わせると良い感じになりそうですね！

こちらも参考になるかもしれません：

• App RouterのOGP設定方法まとめ
• 公式Docs

[kagomen]

ありがとうございます！

今まで気付かなかったのですが、layout.tsxで既にmetadataが定義されていたのですね！

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

試しにpage.tsxでmetadataをimportして、

<h2>{metadata.title}</h2>

としてみたのですが、うまくいきませんでした。
ドキュメント見たら設定方法が何やら複雑そうなので、ちょっと調査してみます！

[kazzyfrog]

この辺のApp Routerの特別なファイルとかも、後々設定してまとめたいですよね！

• ルーティングファイル
• 特別ファイル

[kagomen]

https://nextjs.org/docs/app/api-reference/functions/generate-metadata

• The metadata object and generateMetadata function exports are only supported in Server Components.
• You cannot export both the metadata object and generateMetadata function from the same route segment.

• metadataオブジェクトもgenerateMetadata関数もServer Componentsでのみサポートされている
• metadataオブジェクトとgenerateMetadata関数の両方を同じファイル内でexportできない（どちらかひとつ）

個人ページを表示させるときにgenerateMetadata関数の設定が必要？
それまではmetadataオブジェクトの設定だけで良い？

[kagomen]

https://commte.net/nextjs-metadata

[kagomen]

App RouterのOGP設定方法まとめ [Next.js] -Zenn

export const metadata = {
  title: {
    default: siteName,
    template: `%s - ${siteName}`,
  },
  description,
  openGraph: {
    title: siteName,
    description,
    url,
    siteName,
    locale: 'ja_JP',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: siteName,
    description,
    site: '@サイト用アカウントのTwitterID',
    creator: '@作者のTwitterID',
  },
  verification: {
    google: 'サーチコンソールのやつ',
  },
  alternates: {
    canonical: url,
  },
};

ドキュメントも見たけど、上記の設定しておけば良さそう？

[kagomen]

layout.tsxで

    template: `%s - ${siteName}`,

と設定しておくことで、たとえばABOUTページで以下のように設定すると、

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About',
}

ABOUTページでのタイトルが以下のように設定される
<title>About | タイトル</title>

[kagomen]

ただ定数として使い回すには、constants.tsなどで設定した方がいいのではないか？

export const siteTitle = 'first-contribution-ja'
export const siteUrl = 'https://first-contributions-ja.github.io/';

これを使いまわしたいページ（現状ではpage.tsx）でimportして使ったり、layout.tsxでimportしてmetadataとして設定したり

[kazzyfrog]

まさにそれが良さそうですね！👍

[kazzyfrog]

以下のリポジトリも結構参考になるかもです！
https://github.com/timlrx/tailwind-nextjs-starter-blog

メモ：

• layout.tsxのmetadataは、テンプレとして抽象化されている
• data/siteMetadata.js で内容を記入している

[kagomen]

見てみます！🙏

[kagomen]

// layout.tsx

import siteMetadata from '@/data/siteMetadata'

export const metadata: Metadata = {
  metadataBase: new URL(siteMetadata.siteUrl),
  title: {
    default: siteMetadata.title,
    template: `%s | ${siteMetadata.title}`,
  },
  description: siteMetadata.description,
  openGraph: {
    title: siteMetadata.title,
    description: siteMetadata.description,
    url: './',
    siteName: siteMetadata.title,
    images: [siteMetadata.socialBanner],
    locale: 'en_US',
    type: 'website',
  },
  alternates: {
    canonical: './',
    types: {
      'application/rss+xml': `${siteMetadata.siteUrl}/feed.xml`,
    },
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  twitter: {
    title: siteMetadata.title,
    card: 'summary_large_image',
    images: [siteMetadata.socialBanner],
  },
}

// data/siteMetadata.js

const siteMetadata = {
  title: 'Next.js Starter Blog',
  author: 'Tails Azimuth',
.....
}

module.exports = siteMetadata

[kagomen]

verificationってなんだろう……

https://data.herohoro.com/blog/metadata-ref

metadataオブジェクトには、verificationプロパティを設定することができます。これにより、GoogleやYahooなどのサービスの所有権を確認するためのメタタグを自動的に挿入することができます。

認証とかに使うのかな……？
今回は設定しなくて良さそう？

[kagomen]

chatGPT:

verificationフィールドは、ウェブサイトの所有権を確認するために使用されるメタデータの一部です。具体的には、Google Search Consoleなどのツールでサイトの所有権を確認する際に、このフィールドを設定します。

以下に、詳細な説明を提供します：

サイトの所有権確認:
ウェブサイトの所有者は、Google Search Consoleなどのツールを使用して、サイトのパフォーマンスをモニタリングしたり、エラーを修正したりする必要があります。しかし、誰でも他人のサイトをモニタリングしたり修正したりすることはできません。そのため、サイトの所有者は、ツールにサイトの所有権を証明する必要があります。
この目的で、Google Search Consoleは、ウェブサイトの所有者がサイトの所有権を確認できるようにします。verificationフィールドを使用して、サイトの所有者がウェブサイトにアクセスできることを確認します。
設定方法:
ウェブサイトのルートディレクトリに、所有権確認のための特定のファイル（通常はHTMLファイル）を配置します。このファイルには、所有者が提供されたトークンやコードが含まれています。
Google Search Consoleなどのツールは、このファイルを読み取り、所有者がウェブサイトにアクセスできることを確認します。これにより、サイトの所有権が確認されます。
簡潔に言えば、verificationフィールドは、ウェブサイトの所有者がサイトの所有権を確認するための手段です。

[kagomen]

Google Search Console（Googleサーチコンソール）は、Googleが提供している無料のサイト解析ツールです。ちょっとした魔法の道具のようなものですよ！🔍✨

ここで、小学生でも理解できるように、簡単に説明しますね：

探検家のツール:
サイトの探検家になれるんだよ！Google Search Consoleは、ウェブサイトの中を探検して、いろんな情報を見つけるのに使うんだ。
例えば、ウェブサイトの名前やキーワードで検索された回数や、ウェブページの順位、問題があるかどうかなどを調べることができるんだよ。
魔法の鏡:
ウェブサイトの魔法の鏡みたいなものだよ！鏡を覗いて、自分の姿を見るように、ウェブサイトの中身を見ることができるんだ。
例えば、ウェブページがどのキーワードで検索されているかや、どのページが人気なのかを知ることができるんだよ。
ウェブサイトの改善ツール:
ウェブサイトをもっと良くするためのツールでもあるんだ！問題があれば、それを直す方法も教えてくれるんだよ。
例えば、ウェブページが遅い場合や、モバイルで見づらい場合、Google Search Consoleはアドバイスをくれるんだ。
だから、Google Search Consoleは、ウェブサイトの冒険者になるための魔法のツールなんだよ！🌟🔍

[kagomen]

https://www.youtube.com/watch?v=gDdgQo131Fw

サーチコンソールに登録してないなら設定する必要はなさそうかな？

[kagomen]

cahtGPT:

Next.jsでalternatesプロパティを設定すると、以下の効果があります：

Canonical URLの指定:
canonicalフィールドは、ウェブページの正規URL（Canonical URL）を指定します。Canonical URLは、同じコンテンツが複数のURLで公開されている場合に、検索エンジンに対して正しいバージョンを示すために使用されます。
例えば、同じ記事がexample.com/blogとexample.com/blog/123の2つのURLでアクセスできる場合、canonicalフィールドを設定して正規URLを指定することで、検索エンジンが正しいバージョンを選択できるようになります。

[kagomen]

https://digitalidentity.co.jp/blog/seo/canonical.html

canonical（カノニカル）設定が必要な場合
URLの正規化には「301リダイレクト」と「canonical」の2つの設定方法があります。そして、GoogleはURLの正規化をおこなう場合は301リダイレクトを推奨しています
また、301リダイレクトはユーザーが非正規ページへアクセスした際に、正規ページへ自動的に転送するのに対し、canonicalはユーザーが非正規ページへアクセスしても正規ページへ転送せず、そのまま非正規ページを表示します。
したがって、301リダイレクトができない場合のみ、canonicalを使用するとよいでしょう。

[kagomen]

念の為https://first-contributions-ja.github.io/で設定しておくのが良さそう？

[kagomen]

APIで取得したデータをもとに、動的にメタ情報を設定する方法(Next.js App Router)

OG画像については注意が必要です！
Vercel以外のホスティングサービスを利用する場合はmetadataBaseを設定する必要があります。 何も設定しないと、デプロイしたにも関わらずlocalhostになってしまいます。。😇

！？

[kagomen]

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

metadataBase
metadataBase is a convenience option to set a base URL prefix for metadata fields that require a fully qualified URL.

metadataBase allows URL-based metadata fields defined in the current route segment and below to use a relative path instead of an otherwise required absolute URL.
The field's relative path will be composed with metadataBase to form a fully qualified URL.
If not configured, metadataBase is automatically populated with a default value.

[kagomen]

ここらへんの設定沼っぽそうなので、必要最低限の設定だけしときます……！
ウェブとかサーバーの知識が必要そう……！
詳しい方いらっしゃれば、お願いします😭

[kagomen]

ファビコンの設定はmetadataではなくディレクトリに配置して行う方が推奨されてるっぽい

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png

[kagomen]

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

OG画像もTwitter画像も同じように設定できるっぽい