svelte5-template Svelte Themes

Svelte5 Template

SvelteKit, TypeScript, Tailwind CSS, Shadcn/UI Svelte, Lucide Icons

Svelte 5 Template

Svelte 5 テンプレート 概要

Svelte 5 のテンプレートプロジェクトです。

このプロジェクトは、Svelte 5 / SvelteKit を利用してすぐに新規プロジェクトを始められることを目的に作成されました。

以下を採用しています:

  • SvelteKit(クライアント/サーバーのフレームワーク)
  • Tailwind CSS(スタイリング)
  • Shadcn UI(shadcn-svelte、UI コンポーネント)
  • Lucide Icons(@lucide/svelte、アイコン)
  • Zod(スキーマバリデーション)
  • Biome(Lint とフォーマット)

特徴

  • html lang=ja 設定済み
  • 完全なSSR対応(CSR=false)設定済み
  • 必要なディレクトリ(src/lib内の components, constants, utils, types 等)があらかじめ作成されている
  • API ルート作成済み
  • スラッグを利用したページ作成済み(SSR対応済み): src/routes/blog/[id] を参照
  • VSCode の設定済み(Biome のフォーマッターを使用するetc)
  • Cursor のルール記述済み

直近の更新・タスク管理

  • SSR完全対応
  • Google Analtyics, Google Search Console の設定

開発の準備

対応する Node.js のインストール

nvm install 20.19.0
nvm use 20.19.0

(上記は一例です。実際の対応バージョンは package.json を参照してください) (nvm は Node のバージョンマネージャーです。n や nodebrew 等を使っても構いません)

開発サーバーの起動

npm run check
npm install
npm run dev

表示言語(英語/日本語)

src/app.htmllang 属性を変更するとサイトの表示言語を切り替えられます。

デフォルトは日本語です。

<html lang="ja">

Top categories

Loading Svelte Themes