$ bun create solid
  
 Create-Solid v0.6.2
│
◆  Project Name
│  solid-project
◆  Is this a SolidStart project?
│  ● Yes / ○ No
└
◆  Which template would you like to use?
│  ● basic
│  ○ bare
│  ○ hackernews
│  ○ notes
│  ○ todomvc
│  ○ with-auth
│  ○ with-authjs
│  ○ with-drizzle
│  ○ with-mdx
│  ○ with-prisma
│  ○ with-solid-styled
│  ○ with-tailwindcss
│  ○ with-tanstack-router
│  ○ with-trpc
│  ○ with-unocss
│  ○ with-vitest
│  ○ experiments
◆  Use Typescript?
│  ● Yes / ○ No
└
◇  Project created 🎉
│
◇  To get started, run: ─╮
│                        │
│  cd solid-project      │
│  bun install           │
│  bun dev               │
│                        │
├────────────────────────╯

my-solidstart-app/
├── public/              # 公開アセット（そのまま配信される静的ファイル）
│   ├── favicon.ico      # 例: Favicon。アクセスは「/favicon.ico」
│   └── images/          # 例: 画像ディレクトリ
│       └── logo.png     # 例: ロゴ画像。アクセスは「/images/logo.png」
├── src/                 # アプリのソースコード
│   ├── routes/          # ページコンポーネント置き場（ルーティング定義）
│   │   ├── index.tsx        # ルートページ「/」に対応するページ
│   │   ├── about.tsx        # 「/about」に対応するページ
│   │   ├── blog.tsx         # 「/blog/*」のレイアウト兼ページ（ネストレイアウト）
│   │   ├── (admin)/        # ()で囲むディレクトリは、URLパスには影響を与えず、ファイルをグルーピングする
│   │   │   ├── setting.tsx
│   │   ├── blog/
│   │   │   ├── index.tsx    # 「/blog」トップページ（※blog.tsxとは別にトップ用が必要なら）
│   │   │   ├── [id].tsx     # 「/blog/:id」に対応する動的ページ
│   │   │   └── ...          # その他ブログ記事ページ
│   │   ├── api/             # APIルート（サーバーサイド処理用エンドポイント）
│   │   │   └── articles.tsx # 例: GET/POSTをexportしてAPI実装
│   │   └── [...404].tsx     # キャッチオールルート（存在しないページ用の404）
│   ├── components/      # 再利用可能なコンポーネント群
│   │   ├── ui/              # 細かなUI部品（ボタン、入力欄など）
│   │   │   ├── Button.tsx
│   │   │   ├── Input.tsx
│   │   │   └── ... 
│   │   ├── Header.tsx       # ヘッダーコンポーネント
│   │   ├── Footer.tsx       # フッターコンポーネント 
│   │   └── ...              # その他共通コンポーネント
│   ├── layouts/          # （必要に応じて）ページ横断的なレイアウトコンポーネント
│   │   └── MainLayout.tsx   # 例: 全ページ共通レイアウト
│   ├── lib/ or utils/    # ユーティリティ/共通ロジック置き場
│   │   └── utils.ts         # 例: 汎用的な関数（cn関数など）
│   ├── app.css           # グローバルCSS（Tailwindの@importや全体スタイル）
│   ├── app.tsx           # アプリケーションのルートコンポーネント（共通レイアウトや<Router>定義）
│   ├── entry-client.tsx  # クライアントエントリポイント（ブラウザでのHydration設定）
│   └── entry-server.tsx  # サーバーエントリポイント（リクエスト受付とレンダリング）
├── tailwind.config.cjs   # Tailwind CSSの設定ファイル（テーマのカスタマイズ等）
├── solid.config.ts       # SolidStartの設定ファイル（ビルドモードやプリレンダ設定等）
├── package.json
└── ...

<style scoped>

│   ├── routes/          # ページコンポーネント置き場（ルーティング定義）
│   │   ├── index.tsx        # 
│   │   ├── sample.module.scss #cssをmoduleで作成

.container {
  p {
    margin: 1em auto;
  }

  .form-label {
    @apply block uppercase tracking-wide text-base mb-2;
  }
}

import styles from './sample.module.scss';

export default function Contact() {
return (
    <main class={styles.container}>
      <h1>サンプル</h1>
      <p class="text-red-500">※注意※</p>
      <div>
            <label class="form-label mb-2">
              <p class="text-red-500">message text</p>
            </label>
            <input class="form-text mb-3" type="text" />
      </div>
    </main>
)
}

import { defineConfig } from '@solidjs/start/config';

export default defineConfig({
  // 静的サイト生成の設定
  server: {
    preset: "static",
    // 生成するページのパスを指定
    prerender: {
      routes: [
        '/',
        '/about',
        '/contact',
      ],
      // 動的ルートの処理方法
      crawlLinks: true,
      autoSubfolderIndex: true,
    }
  }
});