Next.js製Webアプリをモバイル端末で表示するときアドレスバーを非表示にする
2024/01/24
2024/01/24
Next.jsで作成したWebアプリをスマホ端末やタブレット端末で表示したとき、アドレスバーを非表示にしたくなりましたので調査しました。
App Routerを使用する場合
layout.tsxのmetadataオブジェクトに以下のプロパティと値を追加します。
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
appleWebApp: true, // 追加
}
export default function Page() {}App Routerを使用しない場合
_document.tsxなどのHeadタグ内に以下の記述を追加します。
<Head>
<title>Tukky Tech Blog</title>
<meta name="description" content="Jam Stackで作成した技術ブログです。" />
<meta name="apple-mobile-web-app-capable" content="yes" /> {/* 追加 iOS */}
<meta name="mobile-web-app-capable" content="yes" /> {/* 追加 AndroidOS */}
<link rel="icon" href="/icon_16.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/icon_192.png" />
</Head>端末での操作
アドレスバーを非表示にするため、対象のWebアプリを起動したら、共有ボタンからページを「ホーム画面に追加」します。
ホーム画面に追加されたWebアプリを起動するとアドレスバーが非表示になります。
↓変更前
↓変更後