toprefixer from 'autoprefixer' import path from 'path'; export default defineConfig({ plugins: [ react(), vike(), ], css: { postcss: { plugins: [ tailwindcss, autoprefixer ] } }, ssr: { noExternal: ['tailwindcss'] }, resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, }); ``` css、ssr、resolveの設定はなくてももしかたら動くかも。AIに聞きまくっていたところなので不要な設定も入り込んでいるかもしれません。 #### フォルダ構成 TOBEのフォルダ構成を見ていただくと分かる通り、src/pages配下にwebページにアクセスしたときのパスとその配下に、+XXX.ts(x)というファイルがあります。 src/pages/indexだけは、webページの｢/｣にリダイレクトされます。いわゆる、ホームページをここに作っておくと良さそうです。 #### コンポーネントここでは、+XXX.ts(x)を解説しておこうと思います。結構複雑なので、若干正確性に欠部分がありますがご容赦ください。先頭に+を付けて、フレームワーク側で定義されている名前をつけると、その機能として認識してくれます。 ##### +Page.tsx クライアントサイドで表示する画面を定義できます。tsxなので、基本的にReact.FCを返して終わりです。ふつーのReactとあんまり変わりません。サンプルコードです。 ``` import Header from "../../components/Header"; import Footer from "../../components/Footer"; import ReactMarkdown from "react-markdown"; import { usePageContext } from "vike-react/usePageContext"; import { PageContext } from "../../types/pageContext"; import { markdownComponents } from "../../components/MarkdownComponents"; const License: React.FC = () => { const pageContext = usePageContext() as { data: PageContext }; const content = pageContext.data?.content || "読み込み中..."; return ( <>

{content}

この記事への反応