feat: add compiler fit for nextjs

src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import { runCode } from '@/actions';  // 导入 Server Action
+
+const CodeRunner = () => {
+  const [code, setCode] = useState('');
+  const [language, setLanguage] = useState('c');
+  const [output, setOutput] = useState('');
+  const [error, setError] = useState('');
+
+  const runCodeHandler = async () => {
+    try {
+      // 调用 Server Action 执行代码
+      const result = await runCode({ code, language });
+
+      setOutput(result.output);
+      setError('');
+    } catch (err) {
+      setError((err as Error).message);
+      setOutput('');
+    }
+  };
+
+  return (
+      <div>
+        <h1>Code Runner</h1>
+        <textarea
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="Write your code here"
+            rows={10}
+            cols={50}
+        />
+        <div>
+          <label>
+            Language:
+            <select value={language} onChange={(e) => setLanguage(e.target.value)}>
+              <option value="c">C</option>
+              <option value="java">Java</option>
+            </select>
+          </label>
+        </div>
+        <button onClick={runCodeHandler}>Run Code</button>
+
+        {output && (
+            <div>
+              <h3>Output:</h3>
+              <pre>{output}</pre>
+            </div>
+        )}
+        {error && (
+            <div>
+              <h3>Error:</h3>
+              <pre>{error}</pre>
+            </div>
+        )}
+      </div>
+  );
+};
+
+export default CodeRunner;