ページ

ページは、src/routes ディレクトリに新しい index.tsx ファイルを追加することで作成されます。ページは default の Qwik コンポーネントをエクスポートします。これはページのコンテンツとしてレンダリングされます。

src/routes/some/path/index.tsx

import { component$ } from '@builder.io/qwik';
 
// Notice the default export
export default component$(() => {
  return <h1>Hello World!</h1>;
});

ページとエンドポイントの唯一の違いは、エンドポイントが onRequest、onGet、onPost、onPut、onDelete、onPatch、または onHead 関数のみをエクスポートすることです。これは、着信リクエストを処理するために使用されます。

`head` エクスポート

すべてのページは、DocumentHead オブジェクトを返す head プロパティ（または関数）をエクスポートできます。DocumentHead オブジェクトは、ページのタイトル、メタ、リンク、スタイルを解決するために使用されます。

この API を使用すると、ページのタイトルだけでなく、メタ、Open Graph、Twitter タグ、リンクを設定できます。これは、SEO やソーシャル共有に役立ちます。

src/routes/about/index.tsx

import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
 
export default component$(() => {
  return <h1>About page</h1>;
});
 
export const head: DocumentHead = {
  // This will be used to resolve the <title> of the page
  title: 'About page',
  meta: [
    {
      name: 'description',
      content: 'This is the about page',
    },
    // Open graph
    {
      property: 'og:title',
      content: 'About page',
    },
    {
      property: 'og:description',
      content: 'This is the about page',
    },
  ],
  links: [
    {
      rel: 'canonical',
      href: 'https://example.com/about',
    },
  ],
};

上記の例では、タイトルといくつかの Open Graph メタと正規リンクを設定しています。

HTML は、<head> タグを <html> 内の最初の要素として（HTML コンテンツの最上部）配置します。<head> セクションは、ルートコンポーネントが直接レンダリングするものではありません。これは、HTML ストリーミングを壊すためです。

コンポーネント内から DocumentHead オブジェクトを読み取り、使用するには、useDocumentHead() を調べてください。

動的なヘッド

DocumentHead オブジェクトを返す関数をエクスポートすることもできます。これにより、<title>、<meta>、または <link> タグをプログラムで設定できます。

これにより、routeLoader$() または routeAction$() のデータを使用して、タイトル、メタ、リンクを含む <head> を設定できます。

head 関数内で routeLoader$() または routeAction$() の値を取得するには、resolveValue メソッドを使用できます。

src/routes/jokes/[jokeId]/index.tsx

import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import type { DocumentHead } from '@builder.io/qwik-city';
 
export const useJoke = routeLoader$(async (requestEvent) => {
  // Fetch a joke from a public API
  const jokeId = requestEvent.params.jokeId;
  const response = await fetch(`https://api.chucknorris.io/jokes/${jokeId}`);
  const joke = await response.json();
  return joke;
});
 
// Now we can export a function that returns a DocumentHead object
export const head: DocumentHead = ({resolveValue, params}) => {
  const joke = resolveValue(useJoke);
  return {
    title: `Joke "${joke.title}"`,
    meta: [
      {
        name: 'description',
        content: joke.text,
      },
      {
        name: 'id',
        content: params.jokeId,
      },
    ],
  };
};

ネストされたレイアウトとヘッド

高度なケースでは、レイアウトは、すでに解決済みのドキュメントヘッドのドキュメントタイトルを変更したい場合があります。以下の例では、ページコンポーネントは Foo のタイトルを返します。含まれているレイアウトコンポーネントは、ページのドキュメントヘッドの値を読み取り、変更できます。この例では、レイアウトコンポーネントはタイトルに MyCompany - を追加しているため、レンダリングされるとタイトルは MyCompany - Foo になります。スタック内のすべてのレイアウトには、新しい値を返す機会があります。

──src/
  └─routes/
    ├─index.tsx
    └─layout.tsx

src/routes/index.tsx

export const head: DocumentHead = {
  title: `Foo`,
};

src/routes/layout.tsx

export const head: DocumentHead = ({ head }) => {
  return {
    title: `MyCompany - ${head.title}`,
  };
};

Google 構造化データ

この例では、Google 構造化データを統合しています。これは、Google にページの意味に関する明示的な手がかりを提供することで役立ちます。カスタム JavaScript コードを埋め込みたい場合は、Partytown を使用して遅延ロードするのが理想的です。ただし、場合によっては、すぐにロードする必要があります。次の例はこれを示しています。

src/routes/about/index.tsx

import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
 
export default component$(() => {
  return <h1>About page</h1>;
});
 
export const head: DocumentHead = {
  scripts: [
    {
      props: {
        type: "application/ld+json",
      },
      script: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "ItemList",
      }),
    },
  ],
};

上記の例では、いくつかの構造化データマークアップを設定しています。

注: head.scripts をレンダリングするには、router-head コンポーネントを変更する必要があります。

src\components\router-head\router-head.tsx

import { component$ } from "@builder.io/qwik";
import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
 
export const RouterHead = component$(() => {
  const head = useDocumentHead();
  const loc = useLocation();
 
  return (
    <>
      <title>{head.title}</title>
 
      {/* add this  */}
      {head.scripts.map((s) => (
        <script key={s.key} {...s.props} dangerouslySetInnerHTML={s.script} />
      ))}
    </>
  );
});

貢献者

このドキュメントをより良くするためにご協力いただいたすべての貢献者に感謝します！

ページ

head エクスポート

動的なヘッド

ネストされたレイアウトとヘッド

Google 構造化データ

貢献者

`head` エクスポート