Get started with Cloudflare

What this blog is all about?

This blog is about how to get started with cloudflare workers using hono and how to make next js app using cloudflare pages.

Cloudflare is a content delivery network (CDN) that provides a global network of servers to deliver your website’s content to users around the world. It is a free service that offers a range of features, including DDoS protection, DDoS mitigation, and performance optimization.

Cloudflare

Why use Cloudflare?

Cloudflare is a popular choice for websites and web applications because of its many benefits. Some of the key advantages of using Cloudflare include:

Security: Cloudflare also provides security by protecting Internet properties from malicious activity like DDoS attacks, malicious bots, and other nefarious intrusions.
Performance optimization: Cloudflare’s performance optimization service helps optimize your website’s performance by analyzing your website’s traffic and identifying areas for improvement.
Speed: It runs on edge servers that provides content and other services as close to you as possible, so you get the information as fast as possible which can significantly improve website speed and load times.

Get started!

To get started, go to cloudflare and make a account there.

Once you’ve signed up, go to the terminal and create a new folder and cd into your folder.

mkdir my-website
cd my-website

After creating the folder, run the following command in the terminal to signin and setup cloudflare worker with hono.

Next js with the power of cloudflare

bun create cloudflare@latest

Enter your project name and then select Website or web app` 1st

After that, you will be asked to select the framework. We are going to use use next js. 4th

Then, you need to configure you next js app. After setting up your next js app, select yes for next-on-pages eslint-plugin. Then, you will be asked if you want to deploy your app. Select No for now. I will teach you how to deploy it later.

Run the development server.

cd your-worker-name
bun dev

Deploy your app.

Firstly, you need to login to your cloudflare account through the terminal if you haven’t. For that, run:

bunx wrangler login

After login, write this command to see if you have successfully logged in or not.

bunx wrangler whoami

if it shows your email, then you have successfully logged in.

Make sure to add this line to your page.tsx file inside app directory.

export const runtime = "edge";

and then simply deploy it by running:

bun wrangler deploy

That’s it! You have successfully deployed your app.