次は何ですか次の画像を作成します.jsルート

25813 ワード
webdev react javascript tutorial テキストリンク
こんにちは!🙋🏻‍♀️
第2のポストへの歓迎は、何ですか?シリーズ!このポストでは、次の作成のプロセスを歩いていきます.を作成するJSアプリSVG 次のAPIを生成する.JS APIルート.プロジェクトのセットアップから起動し、作業APIで終了!それは私の最初のこれまでのシリーズであるので、私に幸運を祈ります、そして、どんなコメントまたは入力も深く評価されます✨. さて、始めましょう!

始める前に.


私は部屋の象に対処する必要性を感じます.このポストでは、SVGを生成し、画像として表示する方法について説明します.we can't use SVG 表紙画像としてOG イメージ.Clickbait - yタイトルを申し訳ありません!🙏🏼

ステップ


すべてのプロセスはこれらのいくつかのステップに分けられます.
  • プロジェクトのセットアップ
  • いくつかのコードをクリーンアップする
  • SVGテンプレートを選択するか、設計する
  • APIを書く
  • SVGを画像として表示する.

    • セットアップ


    まず第一に、私たちはnew Next.js app , 私は本当に使いやすいCLIツールを使用します.始めるには、次のように入力します.
    npx create-next-app
# or
yarn create next-app
    私はこのプロジェクトでTypesScriptを使いたいので--typescript ビハインド.したがって、次のようになります.
    npx create-next-app --typescript
# or
yarn create next-app --typescript
    あなたのアプリの名前を入力し、それはとても便利です!インストールが完了したら、開発サーバーを起動します.
    npm run dev
# or
yarn dev
    おめでとう!🎉 あなたのアプリケーションは現在、実行している.

    クリーンアップ


    今、それはボイラープレートコードのいくつかをクリーンアップする時です.きれいにするものはあなた次第です、しかし、私のために、私はpages/index.tsx . 私はいくつかのテキストを削除しました.
    // pages/index.tsx
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>OG Image (Next.js) | Jade</title>
        <meta
          name="description"
          content="OG Image (Next.js) | Made with 🧡  by Jade"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to OG Image (<a href="https://nextjs.org">Next.js</a>) by Jade
        </h1>
        {/* DISPLAY IMAGE HERE */}
      </main>
    </div>
  );
};

export default Home;
    私の名前(翡翠)をあなたの名前に変えてください、そして、現在、我々は次のステップに続くことができます.

    SVGテンプレートを選択


    SVGテンプレートは何を意味しますか?SVGジェネレータを作っているので、後でカスタマイズするために空白のデザインが必要です.このテンプレートをカバーイメージのベースとして使用するには、DFDを推奨します.しかし、あなたがカバー画像を作成したくない場合は、あなたが好きなものにサイズを設定することができます.テンプレートはSVGで作られたイメージです、あなたが望むどんな種類のデザインも持つことができます.私にとって、私はちょうどグラデーション境界線で白い長方形をつくりました.ここでコードを見ることができます.
      <svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
      .title { font: bolder 52px Helvetica; color: #252A31; height: 230px; display: flex; align-items: flex-start; justify-content: flex-start; }
      .subtitle { font: bold 32px Helvetica; color: #252A31; height: 50px; display: flex; align-items: flex-end; justify-content: flex-start; }
    </style>
    <rect x="10" y="10" width="980" height="400" rx="10" fill="white"/>
    <rect x="10" y="10" width="980" height="400" rx="10" stroke="url(#paint0_angular)" stroke-width="20"/>
    <foreignObject x="80" y="80" width="840" height="280">
      <div class="title" xmlns="http://www.w3.org/1999/xhtml">
        Create Cover Image with Next.js API Routes
      </div>
      <div class="subtitle" xmlns="http://www.w3.org/1999/xhtml">
        What's Next(.js)? ● dev.to/hjades
      </div>
    </foreignObject>
    <defs>
    <radialGradient id="paint0_angular"  gradientUnits="userSpaceOnUse" gradientTransform="skewX(300) scale(3)">
    <stop offset="14.5833%" stop-color="#FA5182"/>
    <stop offset="65.1042%" stop-color="#6AC6C8"/>
    <stop offset="85.4167%" stop-color="#973D99"/>
    </radialGradient>
    </defs>
  </svg>
    このSVGコードは、このポストのカバーイメージのものです👆🏼! あなたの好みにテキストを変更することができますし、どのように見えるかを参照してください.
    このプロジェクトを書く前に、私はSVGについてあまり知りませんでした foreignObject ! それは私たちのSVGコードにHTMLを埋め込むことができます.それはより多くの柔軟性を可能にするため、これはゲームチェンジャーです.挿入することができますdiv 要素と追加のCSSスタイリングflex 自動調整とコンテンツをオーバーフローを作成するには.これがなければ、テキスト配列を text-anchor , しかし、オーバーフロー問題を処理するのはより複雑です.このアプローチの欠点はブラウザコンテキストの必要性であり、WebページにSVG画像を表示する場合には問題ではない.でも次は.JS APIルートはノードで実行します.環境変数foreignObject がサポートされていない.

    APIを書く


    API自体を書く前に、SVGテンプレートを返すUtil関数を作成することから始めなければなりません.これは、シンプルでピュアな関数です.上のコードでは、タイトルはCreate Cover Image with Next.js API Routes そしてフッターはWhat's Next(.js)? ● dev.to/hjades . そこで、新しいファイルを作成します_svg.ts インサイドpages/api フォルダー、およびファイル名の前のアンダースコアは、プライベートファイルであり、APIエンドポイントとして使用されません.
    // pages/api/_svg.ts
export default function getSvg(title: string, footer: string): string {
  const svg = `
  <svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
      .title { font: bolder 52px Helvetica; color: #252A31; height: 230px; display: flex; align-items: flex-start; justify-content: flex-start; }
      .subtitle { font: bold 32px Helvetica; color: #252A31; height: 50px; display: flex; align-items: flex-end; justify-content: flex-start; }
    </style>
    <rect x="10" y="10" width="980" height="400" rx="10" fill="white"/>
    <rect x="10" y="10" width="980" height="400" rx="10" stroke="url(#paint0_angular)" stroke-width="20"/>
    <foreignObject x="80" y="80" width="840" height="280">
      <div class="title" xmlns="http://www.w3.org/1999/xhtml">
        ${title}
      </div>
      <div class="subtitle" xmlns="http://www.w3.org/1999/xhtml">
        ${footer}
      </div>
    </foreignObject>
    <defs>
    <radialGradient id="paint0_angular" gradientUnits="userSpaceOnUse" gradientTransform="skewX(300) scale(3)">
    <stop offset="14.5833%" stop-color="#FA5182"/>
    <stop offset="65.1042%" stop-color="#6AC6C8"/>
    <stop offset="85.4167%" stop-color="#973D99"/>
    </radialGradient>
    </defs>
  </svg>
  `;

  return svg;
}
    util関数を実行すると、現在APIを書くことができます.あなたは、ファイルという名前のhello.ts インサイドpages/api フォルダは、我々はそれに名前を変更することができますindex.ts またはあなたが望むもの.知っている重要なもの、次に.JS用途file-system-based routing そのためにpages そしてAPI routes . これはpages フォルダは単一のページとして扱われ、pages/api フォルダは個々のAPIエンドポイントです.例えば、ファイルpages/api/hello.ts は、/api/hello and pages/api/index.ts は/api/ エンドポイント.だから、ちょうど名前を変更index.ts ファイルを書くことができます.
    // pages/api/index.ts
import type { NextApiRequest, NextApiResponse } from "next";
import getSvg from "./_svg";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const svg = getSvg(String(req.query.title), String(req.query.footer));
  res.statusCode = 200;
  res.setHeader("Content-Type", "image/svg+xml");
  res.setHeader(
    "Cache-Control",
    "public, immutable, no-transform, s-maxage=31536000, max-age=31536000"
  );
  return res.end(svg);
}
    コードを見てみましょう.
  • 機能のエクスポートhandler APIルートが働くために、我々はデフォルト関数をエクスポートする必要がありますつのパラメータでreq and res
  • req APIリクエストを表します(HTTP Incoming Message instance ) and res APIレスポンスHTTP Server Response ) インスタンス
  • req いくつかの便利な組み込みミドルウェアが含まれますreq.query これはquery string
  • この場合、我々は我々を送りますtitle and footer URLで入力するhttps://localhost:3000/api?title=TITLE&footer=FOOTER
  • the getSvg 関数はTITLE and FOOTER 引数として
  • アフターゲットsvg テンプレートは、現在我々はHTTPの応答をクライアントにテンプレートを送信することができます
  • まず、我々はresponse status code to 200 リクエストが成功したことを示す
  • 第二に、応答ヘッダーを設定します Content-Type to image/svg+xml SVGコードを返したので
  • 第三に、応答ヘッダーを設定します Cache-Control キャッシュを有効にするにはhere )
  • 最後に、HTTPコールを終了しますsvg クライアントへ.
    • 新しいAPIを試してみましょう!このURLに移動 http://localhost:3000/api?title=This is the title&footer=and this is the footer 何が見えますか.あなたは、このイメージをここで見ますか?👇🏼

    我々は、最後のステップに進むことができます👏🏼

    SVGをイメージとして表示する


    我々は、我々のWebアプリ上で我々の新しく生成されたイメージを見たいです、しかし、方法?このコードを{/* DISPLAY IMAGE HERE */} 右の内側pages/index.tsx ファイル?私たちはこれをimg タグ
    <img alt={querystring} src={`/api${querystring}`} width="600px" />
    を参照してくださいsrc APIエンドポイントへのポイント?それが我々のレンダリング方法ですSVG code as an image . 我々は異なる内部のテキストで異なるイメージを生成したいので、我々は我々のAPIに我々の要求を伝える方法を必要とします.はい、それはquerystring ! 当社のAPIと同様に、当社のWebアプリも読むことができますquery parameter 使用によってuseRouter API next/router . 我々がURLに行くとき http://localhost:3000/?title=This is the title&footer=and this is the footer , 私たちはquery オブジェクトをuseRouter ) AS :
    { "title": "This is the title", "footer": "and this is the footer" }
    この情報を使用するには、この前にコードのこの部分を追加することができますreturn 我々の中の声明Home コンポーネントpages/index.tsx ファイル
    // pages/index.tsx
import type { NextPage } from "next";
import Head from "next/head";
// also don't forget to import useRouter
import { useRouter } from "next/router";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  // start from here
  const { query } = useRouter();
  const querystring = `?title=${query.title}&footer=${query.footer}`;
  // to here

  return (...)
};

export default Home;
    さあ、このURLに行こう http://localhost:3000/?title=This is the title&footer=and this is the footer ) そして、我々は最終的に我々の生成SVGイメージを参照してくださいよ!🥳

    次は何ですか。


    おめでとう!あなたは、問題のない手順を介して従うことができます願って、ポストの終わりに到達しました.質問がある場合は、コメントや2つを残して自由に感じなさい!次のポストでは、我々はより多くのテキストや画像を生成するイメージを追加するようなカスタマイズを可能にする簡単なフォームを構築しようとします.全体の計画とここの後ろの話のビットを見てください.

    次は何ですか？プロローグ

    ジェイドサントロ宋玉美 ・ 8月14日・ 4分読む

    #javascript #nextjs #sideprojects

    あなたはあなたの考え、コメント、または意見を残して非常に歓迎です!
    Github repo
    Live demo
    Redisのその他の設定とキー取得コマンド
    3-1. Context manager annotation