SvelteKitはディレクトリベースのルーティングを使用するため、モジュールやコンポーネントをそれらを使用するルートと一緒に配置するのが簡単です。「コードは使用する場所の近くに配置する」というのが良い経験則です。
コードが複数の場所で使用される場合があります。この場合、インポートに `../../../../` をプレフィックスとして付けることなく、すべてのルートからアクセスできる場所に配置すると便利です。SvelteKitでは、その場所は `src/lib` ディレクトリです。このディレクトリ内のものはすべて、`src` 内の任意のモジュールから `$lib` エイリアスを介してアクセスできます。
この演習では、両方の `+page.svelte` ファイルが `src/lib/message.js` をインポートしています。しかし、`/a/deeply/nested/route` に移動すると、プレフィックスが間違っているため、アプリが壊れます。代わりに `$lib/message.js` を使用するように更新してください。
src/routes/a/deeply/nested/route/+page
<script>
import { message } from '$lib/message.js';
</script>
<h1>a deeply nested route</h1>
<p>{message}</p>`src/routes/+page.svelte` についても同じことを行ってください。
src/routes/+page
<script>
import { message } from '$lib/message.js';
</script>
<h1>home</h1>
<p>{message}</p>1
2
3
4
5
6
<script>
import { message } from '../lib/message.js';</script>
<h1>home</h1>
<p>{message}</p>