cfp-realtime-md-editer

https://i.ytimg.com/vi/-3EoYGs4THw/maxresdefault.jpg

任意の場所にディレクトリを作成して移動する

mkdir realtime-markdown-editer
cd realtime-markdown-editer

ディレクトリ内でプロジェクトを作成する

npm create cloudflare@latest .

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

Do you want to use the next-on-pages eslint-plugin?
yes

Do you want to deploy your application?
no

不要なコードを削除

Tailwind CSS

app/globals.cssから不要なコードを削除する

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

- :root {
-   --foreground-rgb: 0, 0, 0;
-   --background-start-rgb: 214, 219, 220;
-   --background-end-rgb: 255, 255, 255;
- }
- 
- @media (prefers-color-scheme: dark) {
-   :root {
-     --foreground-rgb: 255, 255, 255;
-     --background-start-rgb: 0, 0, 0;
-     --background-end-rgb: 0, 0, 0;
-   }
- }
- 
- body {
-   color: rgb(var(--foreground-rgb));
-   background: linear-gradient(
-       to bottom,
-       transparent,
-       rgb(var(--background-end-rgb))
-     )
-     rgb(var(--background-start-rgb));
- }
- 
- @layer utilities {
-   .text-balance {
-     text-wrap: balance;
-   }
- }

app/page.tsx

app/page.tsxから不要なコードを削除する

export default function Home() {
  return <main className="">Home</main>;
}

app/api

app/apiディレクトリを削除

フォントを変更

フォントをInterからNoto Sans JPに変更します。
app/layout.tsxでフォントを設定しているので、ファイルを開きます。
まずは、Noto Sans JPをインポートします。

  import type { Metadata } from "next";
- import { Inter } from "next/font/google";
+ import { Noto_Sans_JP } from "next/font/google";
  import "./globals.css";
  
- const inter = Inter({ subsets: ["latin"] });
+ const noto_sans_jp = Noto_Sans_JP({ 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={inter.className}>{children}</body>
+       <body className={noto_sans_jp.className}>{children}</body>
      </html>
    );
  }

メタデータを変更

  import type { Metadata } from "next";
  import { Noto_Sans_JP } from "next/font/google";
  import "./globals.css";
  
  const noto_sans_jp = Noto_Sans_JP({ subsets: ["latin"] });
  
  export const metadata: Metadata = {
-   title: "Create Next App",
+   title: "Realtime Markdown Editer",
-   description: "Generated by create next app",
+   description: "Realtime Markdown Editer App",
  };
  
  export default function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
  		<html lang="en">
        <body className={noto_sans_jp.className}>{children}</body>
      </html>
    );
  }

langを変更

言語を英語から日本語に変更します。

  import type { Metadata } from "next";
  import { Noto_Sans_JP } from "next/font/google";
  import "./globals.css";
  
  const noto_sans_jp = Noto_Sans_JP({ subsets: ["latin"] });
  
  export const metadata: Metadata = {
    title: "Realtime Markdown Editer",
    description: "Realtime Markdown Editer App",
  };
  
  export default function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
-     <html lang="en">
+     <html lang="ja">
        <body className={noto_sans_jp.className}>{children}</body>
      </html>
    );
  }