Configuration

<script> と <style> 要素の制限に hash と nonce のどちらを使用するか。'auto' の場合、プリレンダリングされたページには hash を、動的にレンダリングされるページには nonce が使用されます。

Content-Security-Policy ヘッダーに追加されるディレクティブです。

Content-Security-Policy-Report-Only ヘッダーに追加されるディレクティブです。

POST、PUT、PATCH、DELETE でのフォーム送信時、受信した origin ヘッダーをチェックしてサーバーのオリジン(origin)と一致するか検証することを行うかどうか。

あなたのアプリに対し、別のオリジンから POST、PUT、PATCH、DELETE のリクエスト (Content-Type は application/x-www-form-urlencoded、multipart/form-data、text/plain のいずれか) をできるようにするには、このオプションを無効にする必要があります。ご注意を!

.env ファイルを探すディレクトリです。

クライアントサイドコードに公開されても安全な環境変数に付与される接頭辞です。$env/static/public と $env/dynamic/public をご覧ください。Vite の環境変数ハンドリングを使用する場合は、別途 Vite の envPrefix を設定する必要があることにご注意ください - ただし、通常この機能を使う必要はありません。

A prefix that signals that an environment variable is unsafe to expose to client-side code. Environment variables matching neither the public nor the private prefix will be discarded completely. See $env/static/private and $env/dynamic/private.

favicon.ico や manifest.json のように、不変の URL を持つ、何も処理されない静的なファイルを置く場所です

コードベース全体から $lib としてアクセスできる、アプリの内部ライブラリ

parameter matchers を置くディレクトリ

アプリの構造を定義するファイル (Routing をご覧ください)

service worker のエントリーポイントのロケーション (Service workers をご覧ください)

HTML レスポンスのテンプレートのロケーション

フォールバックエラーレスポンスのテンプレートのロケーション

SvelteKit は初期ページに必要な JavaScript モジュールをプリロードすることで、インポートの 'ウォーターフォール' を回避し、アプリケーションの起動を高速化します。 異なるトレードオフを持つ3つの戦略があります:

• modulepreload - <link rel="modulepreload"> を使用します。これは Chromium ベースのブラウザ、Firefox 115 以上、Safari 17 以上ではベストな結果をもたらします。古いブラウザでは無視されます。
• preload-js - <link rel="preload"> を使用します。Chromium と Safari でウォーターフォールを防ぎますが、Chromium は書くモジュールを2回パースします (script として1回、module として1回)。Firefox ではモジュールが2回リクエストされるようになります。これは、Chromium ユーザーのパフォーマンスをわずかに低下させるのと引き換えに、iOS デバイスのユーザーのパフォーマンスを最大化したい場合には有効な設定です。
• preload-mjs - <link rel="preload"> を使用しますが、.mjs 拡張子であるため、Chromium が二重でパースすることを防ぎます。一部の静的 Web サーバーでは、.mjs ファイルを Content-Type: application/javascript ヘッダーとともに提供すると失敗となり、アプリケーションを壊すことになります。それがもしあなたにあてはまらないのなら、modulepreload がより広くサポートされるまで、これが多くのユーザーにベストなパフォーマンスをもたらすオプションです。

アプリのファイルが提供される絶対パス(absolute path)です。これは、何らかのストレージバケットからファイルを提供する場合に有用です。

ルート相対なパス(root-relative path)です。空文字(empty string)以外を指定する場合、先頭は / を付ける必要があり、末尾には / を付けてはいけません (例: /base-path)。アプリがどこから提供されるかを指定することで、アプリをルートではないパス(non-root path)で動作させることができます。ルート相対(root-relative)なリンクには、先頭に base の値を追加しなければなりません。そうしないとリンクが base ではなくドメインのルート(root)を指してしまいます(これはブラウザの動作によるものです)。これを行うには、base from $app/paths をインポートして <a href="{base}/your-page">Link</a> のようにします。もし、これを頻繁に書くようであれば、再利用可能なコンポーネントに抽出するのも良いでしょう。

Whether to use relative asset paths.

If true, base and assets imported from $app/paths will be replaced with relative asset paths during server-side rendering, resulting in more portable HTML. If false, %sveltekit.assets% and references to build artifacts will always be root-relative paths, unless paths.assets is an external URL

Single-page app fallback pages will always use absolute paths, regardless of this setting.

If your app uses a <base> element, you should set this to false, otherwise asset URLs will incorrectly be resolved against the <base> URL rather than the current page.

In 1.0, undefined was a valid value, which was set by default. In that case, if paths.assets was not external, SvelteKit would replace %sveltekit.assets% with a relative path and use relative paths to reference build artifacts, but base and assets imported from $app/paths would be as specified in your config.

同時にいくつのページをプリレンダリングできるか。JS はシングルスレッドですが、プリレンダリングのパフォーマンスがネットワークに縛られている場合(例えば、リモートの CMS からコンテンツをロードしている場合)、ネットワークの応答を待っている間に他のタスクを処理することで高速化することができます。

SvelteKit が entries からリンクをたどってプリレダリングするページを探すかどうか。

An array of pages to prerender, or start crawling from (if crawl: true). The * string includes all routes containing no required [parameters] with optional parameters included as being empty (since SvelteKit doesn't know what value any parameters should have).

アプリのプリレンダリング中に発生した HTTP エラーに対する応答方法。

• 'fail' — ビルドを失敗させます
• 'ignore' - 失敗(failure)を無視して継続させます
• 'warn' — 継続しますが、警告(warning)をプリントします
• (details) => void — status、path、referrer、referenceType、message プロパティを持つ details オブジェクトを引数に取るカスタムのエラーハンドラです。この関数から throw されると、ビルドが失敗します

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		prerender: {
			handleHttpError: ({ path, referrer, message }) => {
				// ignore deliberate link to shiny 404 page
				if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
					return;
				}

				// otherwise fail the build
				throw new Error(message);
			}
		}
	}
};

あるプリレンダリングページから別のプリレンダリングページへのハッシュリンクが、リンク先ページの id に対応していない場合の応答方法

• 'fail' — ビルドを失敗させます
• 'ignore' - 失敗(failure)を無視して継続させます
• 'warn' — 継続しますが、警告(warning)をプリントします
• (details) => void — path、id、referrers、message プロパティを持つ details オブジェクトを引数に取るカスタムのエラーハンドラです。この関数から throw されると、ビルドが失敗します

entries エクスポートで生成されたエントリーが、生成されたルート(route)とマッチしない場合の応答方法。

• 'fail' — ビルドを失敗させます
• 'ignore' - 失敗(failure)を無視して継続させます
• 'warn' — 継続しますが、警告(warning)をプリントします
• (details) => void — generatedFromId、entry、matchedId、message プロパティを持つ details オブジェクトを引数に取るカスタムのエラーハンドラです。この関数から throw されると、ビルドが失敗します

origin — プリレンダリング時の url.origin の値です。レンダリングされたコンテンツに含まれていると有用な場合があります。

service worker が存在する場合、自動的に登録するかどうか。

static ディレクトリにあるどのファイルを $service-worker.files で利用可能にするかを決定します。

A function that allows you to edit the generated tsconfig.json. You can mutate the config (recommended) or return a new one. This is useful for extending a shared tsconfig.json in a monorepo root, for example.

アプリの現在のバージョンの文字列です。これを指定する場合は、決定論的なものでないといけません (例えば Math.random() や Date.now().toString() ではなく commit ref )。指定しない場合は、ビルドのタイムスタンプがデフォルトとなります

例えば、現在のコミットハッシュを使用するには、git rev-parse HEAD を使用することができます:

ts
import * as child_process from 'node:child_process';

export default {
	kit: {
		version: {
			name: child_process.execSync('git rev-parse HEAD').toString().trim()
		}
	}
};

バージョンの変更をポーリングするインターバル(ミリ秒)です。これが 0 の場合、ポーリングは発生しません。