【Next.js13 + Vercel】App RouterでOGPとアナリティクスの設定をしたい

# はじめに

https://qiita.com/keisuke_sakuma/items/b33031a28f7c36741342

はじめまして！
上記のアプリを開発した際に、OGPの表示に苦労したので今回まとめてみます。

# できること
- Next.js13 + Vercel + App Routerの環境で、OGPとアナリティクスの設定ができるようになる

# 完成品

https://next-ogp-analytics.vercel.app/


# 環境構築

まずは環境構築です。

```javascript
npx create-next-app@latest
```


```javascript
✔ What is your project named? … next-ogp-analytics
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
```

```javascript
cd next-ogp-analytics
```


```javascript
npm run dev
```

[![Image from Gyazo](https://i.gyazo.com/b7976fcd983f4020faffe3adb639eeea.png)](https://gyazo.com/b7976fcd983f4020faffe3adb639eeea)

::: note warn
全て本番環境で動作確認をするようにするので、リポジトリの作成と適宜commit、
Vercelへのデプロイ済みという前提で進めていきます！
済んでいない方はこちらを参考に進めてみてください。
https://typescriptbook.jp/tutorials/vercel-deploy
:::


# リンクの表示

```javascript:src/app/layout.tsx

import Image from 'next/image';
import Link from 'next/link';

export default function Home() {
	return (
		<main className="flex min-h-screen flex-col items-center justify-between p-24">
				<Link href="https://twitter.com/share?url=https://next-ogp-analytics.vercel.app">
				  Twitter
			    </Link>
		</main>
	);

```

[![Image from Gyazo](https://i.gyazo.com/56e78b1390151f4b812751c297d997b8.png)](https://gyazo.com/56e78b1390151f4b812751c297d997b8)

# OGPの配置

手順としては2つだけです！
- 1.layout.tsxのMetadataにタイトルと説明の設定
- 2.OGP画像の配置


```javascript:src/app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
	metadataBase: new URL('https://next-ogp-analytics.vercel.app/'), //本番環境のアプリ名
	title: 'タイトル',
	description: '説明',
	openGraph: {
		title: 'タイトル',
		description: '説明',
	},
	twitter: {
		title: 'タイトル',
		description: '説明',
		card: 'summary_large_image',
	},
};
export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html lang="en">
			<body className={inter.className}>{children}</body>
		</html>
	);
}

```

Next.js13以降では`src/app`配下に指定の命名で画像を配置することで、画像をもとに動的にmetaタグが生成されます。

`src/app`配下に`opengraph-image.jpg`と`twitter-image.jpg`で画像を配置します。

推奨サイズは`1200(幅)*630(高さ)`です。
[![Image from Gyazo](https://i.gyazo.com/9463856476101c70dc6878cb1dff2812.png)](https://gyazo.com/9463856476101c70dc6878cb1dff2812)

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

# 念のため確認

Twitter Card validatorにURLを入力して、成功のログが出るか確認しましょう。

https://cards-dev.twitter.com/validator

[![Image from Gyazo](https://i.gyazo.com/aa30c11d028bd1bb9d71e9c96b7c2700.png)](https://gyazo.com/aa30c11d028bd1bb9d71e9c96b7c2700)

OGPが表示されました！

::: note warn
OGP表示まで時間がかかる場合があります。
:::

[![Image from Gyazo](https://i.gyazo.com/8231d919aa0da95b4830b6fcd48157e2.png)](https://gyazo.com/8231d919aa0da95b4830b6fcd48157e2)


https://next-ogp-analytics.vercel.app/


# アナリティクスの設定
今回はGoogle Anlyticsではなく、Vercerlで用意されている`@vercel/analytics`で設定をします。


https://vercel.com/docs/analytics/quickstart


```javascript
npm i @vercel/analytics
```

```javascript
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Analytics } from '@vercel/analytics/react'; //ここを追加

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
	metadataBase: new URL('https://next-ogp-analytics.vercel.app/'),//本番環境のアプリ名
	title: 'タイトル',
	description: '説明',
	openGraph: {
		title: 'タイトル',
		description: '説明',
	},
	twitter: {
		title: 'タイトル',
		description: '説明',
		card: 'summary_large_image',
	},
};
export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html lang="en">
			<body className={inter.className}>
				{children}
				<Analytics /> //ここを追加
			</body>
		</html>
	);
}


```


Vercelの管理画面でアナリティクスを確認することができます。
シンプルな項目ではありますが、小規模の個人開発にはこのくらいでも向いてそうです。

[![Image from Gyazo](https://i.gyazo.com/b8cd84779cf1489867fd789a52723555.png)](https://gyazo.com/b8cd84779cf1489867fd789a52723555)

[![Image from Gyazo](https://i.gyazo.com/425469b58719ca29dd93434bcc7abbbe.png)](https://gyazo.com/425469b58719ca29dd93434bcc7abbbe)


::: note warn
基本hobbyプランになるので無料枠で使用できますが、サービスの規模によっては課金する必要も出てきます。
https://vercel.com/docs/accounts/plans
:::

# おわりに
OGPの表示に苦労したので、最低限を考慮してまとめられてよかったです。
最後まで読んでいただき、ありがとうございました！