{"id":13016,"date":"2023-08-11T02:36:04","date_gmt":"2023-08-11T09:36:04","guid":{"rendered":"https:\/\/www.pingcap.com\/?p=13016"},"modified":"2024-02-17T19:39:44","modified_gmt":"2024-02-18T03:39:44","slug":"build-with-tidb-serverless-vercel","status":"publish","type":"post","link":"https:\/\/www.pingcap.com\/ko\/blog\/build-with-tidb-serverless-vercel\/","title":{"rendered":"Using TiDB Serverless and Vercel to Streamline App Development"},"content":{"rendered":"<p><a href=\"https:\/\/github.com\/pingcap\/tidb\">\ud2f0DB<\/a> is an advanced open-source, distributed SQL database with online transactional and analytical processing capabilities. TiDB Serverless is a cloud DBaaS deployment option of TiDB designed for developers to build applications in a much smarter, faster, simpler, and always-available way.&nbsp; <a href=\"https:\/\/vercel.com\/home\">Vercel<\/a> is the creator and maintainer of Next.js and an end-to-end platform for front-end developers to quickly develop, preview, ship, and iterate web applications. With the<a href=\"https:\/\/www.pingcap.com\/ko\/blog\/develop-apps-faster-with-the-integration-of-vercel-and-tidb-cloud\/\"> integration of TiDB Severless and Vercel<\/a>, web application development will become much faster, more streamlined, and more automated.<\/p>\n\n\n\n<p>In this tutorial, we&#8217;ll describe step by step how to quickly create an all-in-cloud bookstore website using TiDB Serverless and Vercel with a traditional object\u2013relational mapping (ORM) based API development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Things_you_should_know_before_you_get_started\"><\/span>Things you should know before you get started&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vercel can host websites with serverless\/edge functions, which is different from that with traditional APIs. The key differences between a serverless function and a traditional API are as follows :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A serverless function is designed to run a specific piece of code in response to an event; they execute on-demand and scale automatically without need for infrastructure management. While a traditional&nbsp; API provides a more generic interface that follows a request-response model allowing clients to directly interact with the system or service.&nbsp;<\/li>\n\n\n\n<li>A serverless function is usually associated with a specific cloud provider, while a traditional API can be implemented on any infrastructure.<\/li>\n\n\n\n<li>Serverless functions facilitate faster development with shorter deployment cycles, while traditional APIs may require more development time to set up infrastructure and manage scaling, potentially slowing down the deployment process.This tutorial is for developers who plan to build web applications quickly with small amounts of data.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before you get started to build your web applications with TiDB Serverless and Vercel, make sure you\u2019ve already registered for the following:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <a href=\"https:\/\/tidbcloud.com\/free-trial\">TiDB cloud<\/a> account.<\/li>\n\n\n\n<li>A <a href=\"https:\/\/github.com\/\">GitHub<\/a> account.<\/li>\n\n\n\n<li>A <a href=\"https:\/\/vercel.com\/\">Vercel<\/a> account that you can log into with your GitHub account.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_the_TiDB_Serverless_cluster\"><\/span>Create the TiDB Serverless cluster<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this section, we\u2019ll create a Serverless Tier TiDB Cloud cluster step by step.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/tidbcloud.com\/free-trial\">Sign in<\/a> to your TiDB Cloud.&nbsp;<\/li>\n\n\n\n<li>Follow the on-screen instruction to create a<strong> <\/strong>Serverless Tier cluster for free in seconds.<\/li>\n\n\n\n<li>Click the cluster name to enter the cluster interface.<em> <\/em>In the cluster interface, click <strong>Connect<\/strong> to access the connection details. Make sure to note down the values of <strong>Host, Port, and User <\/strong>from the <strong>Connection<\/strong> section. We will use this information later to configure the ORM connection in our code.<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10190806\/image-1024x424.png\" alt=\"\"><p style=\"text-align:center\"><\/p><\/figure><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Deploy_the_book-store_website_using_a_Cloud_IDE\"><\/span>Deploy the book-store website using a Cloud IDE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that we have successfully created our TiDB Serverless cluster, let&#8217;s see how we can accelerate the development efforts by using collaborative development on the cloud. We recommend using <a href=\"https:\/\/github.com\/features\/codespaces\">GitHub Codespace<\/a> as an integrated development environment (IDE). GitHub Codespaces is a cloud-based development environment that provides accessibility, consistency, scalability, collaboration, and isolation.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set up the Workspace<\/h3>\n\n\n\n<p>You can create a workspace in GitHub Codespace by following the steps below:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <a href=\"https:\/\/github.com\/pingcap\/tidb-prisma-vercel-demo\">GitHub repository for the bookstore<\/a>.<\/li>\n\n\n\n<li>Under <strong>Code<\/strong> &#8211; <strong>Codespaces<\/strong> tab, click the <strong>Create codespace on the main<\/strong> button as shown below. This should open and load the files and folders within the GitHub repository in a new browser window.<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"810\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10230955\/image-1-1024x810.png\" alt=\"\" class=\"wp-image-13283\" srcset=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10230955\/image-1-1024x810.png 1024w, https:\/\/static.pingcap.com\/files\/2023\/08\/10230955\/image-1-300x237.png 300w, https:\/\/static.pingcap.com\/files\/2023\/08\/10230955\/image-1-768x607.png 768w, https:\/\/static.pingcap.com\/files\/2023\/08\/10230955\/image-1.png 1194w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li>\n\n\n\n<li>Allow the default terminal to settle on \u201c<em>\/workspaces\/tidb-prisma-vercel-demo (main)<\/em>\u201d prompt. You will see the Bookshop Demo interface in the IDE as shown below:<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"643\" class=\"wp-image-13284\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10231715\/image-2-1024x643.png\" alt=\"\" srcset=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10231715\/image-2-1024x643.png 1024w, https:\/\/static.pingcap.com\/files\/2023\/08\/10231715\/image-2-300x189.png 300w, https:\/\/static.pingcap.com\/files\/2023\/08\/10231715\/image-2-768x483.png 768w, https:\/\/static.pingcap.com\/files\/2023\/08\/10231715\/image-2-1536x965.png 1536w, https:\/\/static.pingcap.com\/files\/2023\/08\/10231715\/image-2-1440x905.png 1440w, https:\/\/static.pingcap.com\/files\/2023\/08\/10231715\/image-2.png 1593w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Verify Connection to the TiDB Serverless cluster<\/h3>\n\n\n\n<p>In the terminal, verify that you can connect to your TiDB Serverless cluster. Using the information we obtained in <a href=\"https:\/\/docs.google.com\/document\/d\/1YaEByOU2VlHol1Uw5xq0TpsgKSb5j7mlJDqBjpSiZtg\/edit#heading=h.xp3jfawt6an8\">Step 3<\/a>, execute the following commands:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt updatesudo apt install -y mysql-clientmysql --connect-timeout 15 -u &lt;user_name&gt; -h &lt;host&gt; -P 4000 -D &lt;database_name&gt; --ssl-mode=VERIFY_IDENTITY --ssl-ca=\/etc\/ssl\/certs\/ca-certificates.crt -p&lt;your_password&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Bookstore Schema<\/h3>\n\n\n\n<p>When we develop an application, an ORM framework is always helpful to make the code more maintainable, more secure, and more efficient. In this demonstration, we\u2019ll use <a href=\"https:\/\/github.com\/prisma\/prisma\">Prisma<\/a>, a popular TypeScript ORM, as an example to create a bookstore schema. You may also use <a href=\"https:\/\/ossinsight.io\/collections\/javascript-orm\">other ORMs<\/a> to build your own applications.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install dependencies, open a new terminal in the Cloud IDE and execute&nbsp; the following command: <pre class=\"wp-block-code\"><code>yarn<\/code><\/pre><\/li>\n\n\n\n<li>To configure the DATABASE_URL environment variable in your runtime, execute the following command in your terminal. You will also use the information we obtained in <a href=\"https:\/\/docs.google.com\/document\/d\/1YaEByOU2VlHol1Uw5xq0TpsgKSb5j7mlJDqBjpSiZtg\/edit#heading=h.xp3jfawt6an8\">Step 3 of \u201cCreate the TiDB Serverless cluster\u201d<\/a>.<pre class=\"wp-block-code\"><code>export DATABASE_URL='mysql:\/\/&lt;user_name&gt;:&lt;password&gt;@&lt;host&gt;:4000\/&lt;database_name&gt;?pool_timeout=60&amp;sslaccept=accept_invalid_certs'<\/code><\/pre><\/li>\n\n\n\n<li>Initialize the database and tables in TiDB Serverless by executing the command below:<pre class=\"wp-block-code\"><code>yarn prisma:deploy<\/code><\/pre><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Launch the project in your cloud IDE<\/h3>\n\n\n\n<p>Initiate a development preview by executing the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn vercel-buildyarn start<\/code><\/pre>\n\n\n\n<p>Once port 3000 becomes available, you&#8217;ll receive a prompt. Click <strong>Open in Browser<\/strong> to preview the live demo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"643\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10233750\/image-3-1024x643.png\" alt=\"\" class=\"wp-image-13285\" srcset=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10233750\/image-3-1024x643.png 1024w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233750\/image-3-300x189.png 300w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233750\/image-3-768x483.png 768w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233750\/image-3-1536x965.png 1536w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233750\/image-3-1440x905.png 1440w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233750\/image-3.png 1593w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>Port 3000 is available<\/em><\/p>\n\n\n\n<p>With the completion of all the steps, the project has been successfully initialized with TiDB Serverless. We now have an established database connection and a suite of predefined tables. To perform operations like selecting, updating, or deleting, please refer to the <a href=\"https:\/\/github.com\/pingcap\/tidb-prisma-vercel-demo\/tree\/main\/pages\/api\">Prisma Vercel API code<\/a>. Within this code base, you&#8217;ll discover how to interact with the TiDB Serverless database and its tables through Prisma, as well as how to encapsulate these interactions into APIs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Deploy_on_Vercel_via_TiDB_Serverless_Integration\"><\/span>Deploy on Vercel via TiDB Serverless Integration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In a typical deployment workflow, there&#8217;s often a need for multiple environments like development, staging, and production. However, manually configuring these environments can be time-consuming and error-prone for developers, particularly when frequent configuration updates are required. To save you from these mundane tasks, we recommend utilizing <a href=\"https:\/\/vercel.com\/integrations\/tidb-cloud\">TiDB\u2019s cloud integration<\/a> directly from the Vercel marketplace. Setting up and launching a project requires just a few clicks. Moreover, we offer our demonstration code as a <a href=\"https:\/\/vercel.com\/templates\/next.js\/tidb-cloud-starter\">TiDB Cloud Starter Template<\/a> for your convenience.<\/p>\n\n\n\n<p>Now, let&#8217;s proceed to deploy your application using a Vercel Template<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit the <a href=\"https:\/\/vercel.com\/templates\/next.js\/tidb-cloud-starter\">TiDB Cloud Starter Template<\/a><strong> <\/strong>and click <strong>Deploy<\/strong>. You will be instructed to create a GitHub repository. Simply provide a name for the repository and Vercel will create a repository if it does not exist.<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"639\" class=\"wp-image-13286\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10233853\/image-4-1024x639.png\" alt=\"\" srcset=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10233853\/image-4-1024x639.png 1024w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233853\/image-4-300x187.png 300w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233853\/image-4-768x479.png 768w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233853\/image-4-1440x899.png 1440w, https:\/\/static.pingcap.com\/files\/2023\/08\/10233853\/image-4.png 1512w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li>\n\n\n\n<li>After creating the Git repository, click on the &#8216;Add&#8217; button located next to \u2018TiDB Cloud\u2019 within the &#8216;Add Integrations&#8217; section. In the popup window, select the target <strong>Vercel Project<\/strong>, TiDB <strong>Organization<\/strong>, <strong>Project<\/strong>, \uadf8\ub9ac\uace0 <strong>Cluster<\/strong> name (you can opt to leave these three fields with their default values). <figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-13286\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10234046\/image-5-1024x639.png\" alt=\"\"><\/figure><\/li>\n\n\n\n<li>Select <strong>Prisma<\/strong> for the Framework, and then click <strong>Add Integration<\/strong>. This will automatically navigate you back to Vercel&#8217;s integration screen, where you can observe a deployment in progress. <figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-13286\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10234153\/image-6-1024x776.png\" alt=\"\"><\/figure><\/li>\n\n\n\n<li>After a successful deployment, click the <strong>Continue to Dashboard<\/strong> button. This will direct you to the dashboard page, where you can then click the <strong>Visit<\/strong> button located on the right side to verify whether your application has been deployed successfully.<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-13286\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10234355\/image-7-1024x597.png\" alt=\"\"><\/figure><\/li>\n\n\n\n<li>Verify auto-generated environment variables by clicking on <strong>Settings<\/strong> &gt;<strong> Environment Variables<\/strong>. Thanks to the integration, all connection information is automatically configured for you.<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-13286\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/10235044\/image-8-1024x643.png\" alt=\"\"><\/figure><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this short tutorial, we showed the ease and effectiveness of utilizing TiDB Serverless and Vercel integration to streamline the development process with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TiDB Serverless, which simplifies the process and reduces the learning curve for developers.<\/li>\n\n\n\n<li>ORM compatibility, which offers seamless integration with popular ORM systems.<\/li>\n\n\n\n<li>Cloud IDE, which utilizes codespaces to provide a more efficient development experience.<\/li>\n\n\n\n<li>TiDB Serverless\u2019 integration with Vercel, which provides one-click configuration to simplify setup.<\/li>\n<\/ul>\n\n\n\n<p>These enhancements reflect our ongoing commitment to creating a more developer-friendly ecosystem within TiDB Serverless. In a subsequent blog post, we will also show you alternative ways to build a bookstore using <a href=\"https:\/\/docs.pingcap.com\/tidbcloud\/data-service-overview\">TiDB Cloud&#8217;s Data Services<\/a>, which enable you to access TiDB cloud data via HTTPS requests using a custom API endpoint.<\/p>\n\n\n\n<p>If you are interested in the source code of our virtual bookstore, check out the <a href=\"https:\/\/github.com\/pingcap\/tidb-prisma-vercel-demo\">demo&#8217;s GitHub code repository<\/a>. If you have any questions or feedback, feel free to contact us through our <a href=\"https:\/\/twitter.com\/PingCAP\">Twitter<\/a>, <a href=\"https:\/\/www.linkedin.com\/company\/pingcap\/mycompany\/\">LinkedIn<\/a>, or our <a href=\"https:\/\/slack.tidb.io\/invite?team=tidb-community&amp;channel=everyone&amp;ref=pingcap\">Slack Channel<\/a>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Discover how TiDB Serverless can streamline your app development by&nbsp;<a href=\"https:\/\/tidbcloud.com\/free-trial?__hstc=86493575.e9f9786a1340e173fd8ea0a3a491a08e.1684130400012.1691743455364.1691746162929.206&amp;__hssc=86493575.6.1691746162929&amp;__hsfp=574653929&amp;_gl=1*1bx7y17*_ga*MjEzNDg1MDcwMi4xNjg0MTMwMzk4*_ga_9FRXHHPYVY*MTY5MTc0MzQ1MS4yNTguMS4xNjkxNzQ2MjM5LjQzLjAuMA..&amp;_ga=2.150078902.1041795747.1691385776-2134850702.1684130398&amp;_gac=1.81139045.1688105422.Cj0KCQjw1_SkBhDwARIsANbGpFu80kgN4JBVRkQvb3Ux2Ji8LJuITZxJEPY8fA_gPBLFth9bZTw574YaAqGVEALw_wcB\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>spinning up a free cluster instantly<\/strong><\/a>!<\/p>","protected":false},"excerpt":{"rendered":"<p>TiDB is an advanced open-source, distributed SQL database with online transactional and analytical processing capabilities. TiDB Serverless is a cloud DBaaS deployment option of TiDB designed for developers to build applications in a much smarter, faster, simpler, and always-available way.&nbsp; Vercel is the creator and maintainer of Next.js and an end-to-end platform for front-end developers [&hellip;]<\/p>\n","protected":false},"author":195,"featured_media":13295,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":"","footnotes":""},"categories":[13],"tags":[163,31,208,29],"class_list":["post-13016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product","tag-app-developer","tag-tidb-cloud","tag-tidb-serverless","tag-tutorial"],"acf":[],"featured_image_src":"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png","author_info":{"display_name":"Zhen Chen","author_link":"https:\/\/www.pingcap.com\/ko\/blog\/author\/zhen-chen\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using TiDB Serverless and Vercel to Streamline App Development | TiDB<\/title>\n<meta name=\"description\" content=\"This tutorial guides developers through the integration of TiDB Serverless and Vercel for faster app development.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pingcap.com\/ko\/blog\/build-with-tidb-serverless-vercel\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using TiDB Serverless and Vercel to Streamline App Development | TiDB\" \/>\n<meta property=\"og:description\" content=\"This tutorial guides developers through the integration of TiDB Serverless and Vercel for faster app development.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pingcap.com\/ko\/blog\/build-with-tidb-serverless-vercel\/\" \/>\n<meta property=\"og:site_name\" content=\"TiDB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/pingcap2015\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-11T09:36:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-18T03:39:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.pingcap.com\/files\/2023\/08\/11022823\/tidb-serverless-vercel-social.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1875\" \/>\n\t<meta property=\"og:image:height\" content=\"938\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zhen Chen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/static.pingcap.com\/files\/2023\/08\/11022823\/tidb-serverless-vercel-social.png\" \/>\n<meta name=\"twitter:creator\" content=\"@PingCAP\" \/>\n<meta name=\"twitter:site\" content=\"@PingCAP\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zhen Chen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/\"},\"author\":{\"name\":\"Zhen Chen\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/person\/db08a2cff72d693ae2a9d0a45c3b7186\"},\"headline\":\"Using TiDB Serverless and Vercel to Streamline App Development\",\"datePublished\":\"2023-08-11T09:36:04+00:00\",\"dateModified\":\"2024-02-18T03:39:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/\"},\"wordCount\":1291,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.pingcap.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png\",\"keywords\":[\"App Developer\",\"TiDB Cloud\",\"TiDB Serverless\",\"Tutorial\"],\"articleSection\":[\"Product\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/\",\"url\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/\",\"name\":\"Using TiDB Serverless and Vercel to Streamline App Development | TiDB\",\"isPartOf\":{\"@id\":\"https:\/\/www.pingcap.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png\",\"datePublished\":\"2023-08-11T09:36:04+00:00\",\"dateModified\":\"2024-02-18T03:39:44+00:00\",\"description\":\"This tutorial guides developers through the integration of TiDB Serverless and Vercel for faster app development.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage\",\"url\":\"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png\",\"contentUrl\":\"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png\",\"width\":1875,\"height\":625,\"caption\":\"TiDB Serverless and Vercel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pingcap.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using TiDB Serverless and Vercel to Streamline App Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pingcap.com\/#website\",\"url\":\"https:\/\/www.pingcap.com\/\",\"name\":\"TiDB\",\"description\":\"TiDB | SQL at Scale\",\"publisher\":{\"@id\":\"https:\/\/www.pingcap.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pingcap.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pingcap.com\/#organization\",\"name\":\"PingCAP\",\"url\":\"https:\/\/www.pingcap.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png\",\"contentUrl\":\"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png\",\"width\":811,\"height\":232,\"caption\":\"PingCAP\"},\"image\":{\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/pingcap2015\",\"https:\/\/x.com\/PingCAP\",\"https:\/\/linkedin.com\/company\/pingcap\",\"https:\/\/youtube.com\/channel\/UCuq4puT32DzHKT5rU1IZpIA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/person\/db08a2cff72d693ae2a9d0a45c3b7186\",\"name\":\"Zhen Chen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.pingcap.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg\",\"contentUrl\":\"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg\",\"caption\":\"Zhen Chen\"},\"description\":\"Software Engineer\",\"url\":\"https:\/\/www.pingcap.com\/ko\/blog\/author\/zhen-chen\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using TiDB Serverless and Vercel to Streamline App Development | TiDB","description":"This tutorial guides developers through the integration of TiDB Serverless and Vercel for faster app development.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pingcap.com\/ko\/blog\/build-with-tidb-serverless-vercel\/","og_locale":"ko_KR","og_type":"article","og_title":"Using TiDB Serverless and Vercel to Streamline App Development | TiDB","og_description":"This tutorial guides developers through the integration of TiDB Serverless and Vercel for faster app development.","og_url":"https:\/\/www.pingcap.com\/ko\/blog\/build-with-tidb-serverless-vercel\/","og_site_name":"TiDB","article_publisher":"https:\/\/facebook.com\/pingcap2015","article_published_time":"2023-08-11T09:36:04+00:00","article_modified_time":"2024-02-18T03:39:44+00:00","og_image":[{"width":1875,"height":938,"url":"https:\/\/static.pingcap.com\/files\/2023\/08\/11022823\/tidb-serverless-vercel-social.png","type":"image\/png"}],"author":"Zhen Chen","twitter_card":"summary_large_image","twitter_image":"https:\/\/static.pingcap.com\/files\/2023\/08\/11022823\/tidb-serverless-vercel-social.png","twitter_creator":"@PingCAP","twitter_site":"@PingCAP","twitter_misc":{"Written by":"Zhen Chen","Est. reading time":"7\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#article","isPartOf":{"@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/"},"author":{"name":"Zhen Chen","@id":"https:\/\/www.pingcap.com\/#\/schema\/person\/db08a2cff72d693ae2a9d0a45c3b7186"},"headline":"Using TiDB Serverless and Vercel to Streamline App Development","datePublished":"2023-08-11T09:36:04+00:00","dateModified":"2024-02-18T03:39:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/"},"wordCount":1291,"commentCount":0,"publisher":{"@id":"https:\/\/www.pingcap.com\/#organization"},"image":{"@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage"},"thumbnailUrl":"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png","keywords":["App Developer","TiDB Cloud","TiDB Serverless","Tutorial"],"articleSection":["Product"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/","url":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/","name":"Using TiDB Serverless and Vercel to Streamline App Development | TiDB","isPartOf":{"@id":"https:\/\/www.pingcap.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage"},"image":{"@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage"},"thumbnailUrl":"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png","datePublished":"2023-08-11T09:36:04+00:00","dateModified":"2024-02-18T03:39:44+00:00","description":"This tutorial guides developers through the integration of TiDB Serverless and Vercel for faster app development.","breadcrumb":{"@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#primaryimage","url":"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png","contentUrl":"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png","width":1875,"height":625,"caption":"TiDB Serverless and Vercel"},{"@type":"BreadcrumbList","@id":"https:\/\/www.pingcap.com\/blog\/build-with-tidb-serverless-vercel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pingcap.com\/"},{"@type":"ListItem","position":2,"name":"Using TiDB Serverless and Vercel to Streamline App Development"}]},{"@type":"WebSite","@id":"https:\/\/www.pingcap.com\/#website","url":"https:\/\/www.pingcap.com\/","name":"\ud2f0DB","description":"TiDB | SQL at Scale","publisher":{"@id":"https:\/\/www.pingcap.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pingcap.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/www.pingcap.com\/#organization","name":"PingCAP","url":"https:\/\/www.pingcap.com\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/","url":"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png","contentUrl":"https:\/\/static.pingcap.com\/files\/2021\/11\/pingcap-logo.png","width":811,"height":232,"caption":"PingCAP"},"image":{"@id":"https:\/\/www.pingcap.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/pingcap2015","https:\/\/x.com\/PingCAP","https:\/\/linkedin.com\/company\/pingcap","https:\/\/youtube.com\/channel\/UCuq4puT32DzHKT5rU1IZpIA"]},{"@type":"Person","@id":"https:\/\/www.pingcap.com\/#\/schema\/person\/db08a2cff72d693ae2a9d0a45c3b7186","name":"Zhen Chen","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.pingcap.com\/#\/schema\/person\/image\/","url":"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg","contentUrl":"https:\/\/static.pingcap.com\/files\/2022\/10\/17234942\/avatar.jpg","caption":"Zhen Chen"},"description":"Software Engineer","url":"https:\/\/www.pingcap.com\/ko\/blog\/author\/zhen-chen\/"}]}},"grav_blocks":false,"card_markup":"<a class=\"card-resource bg-white\" href=\"https:\/\/www.pingcap.com\/ko\/blog\/build-with-tidb-serverless-vercel\/\"><div class=\"card-resource__image-container\"><img class=\"card-resource__image\" alt=\"TiDB Serverless and Vercel\" src=\"https:\/\/static.pingcap.com\/files\/2023\/08\/11022649\/tidb-serverless-vercel-banner.png\" loading=\"lazy\" width=1875 height=625 \/><\/div><div class=\"card-resource__content-container\"><div class=\"card-resource__content-head\"><div class=\"card-resource__category\">Product<\/div><\/div><h5 class=\"card-resource__title\">Using TiDB Serverless and Vercel to Streamline App Development<\/h5><\/div><\/a>","_links":{"self":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts\/13016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/users\/195"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/comments?post=13016"}],"version-history":[{"count":18,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts\/13016\/revisions"}],"predecessor-version":[{"id":15858,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/posts\/13016\/revisions\/15858"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/media\/13295"}],"wp:attachment":[{"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/media?parent=13016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/categories?post=13016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pingcap.com\/ko\/wp-json\/wp\/v2\/tags?post=13016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}