Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anicedantfa/blog.ngockhoi96.dev
A personal blog that share my ideas, experiences about techs and lifestyles.
https://github.com/anicedantfa/blog.ngockhoi96.dev
blog cloudflare markdown mdx nextjs postcss react-hook-form react-testing-library reactjs storybook typescript velite vercel vitest zod zustand
Last synced: about 10 hours ago
JSON representation
A personal blog that share my ideas, experiences about techs and lifestyles.
- Host: GitHub
- URL: https://github.com/anicedantfa/blog.ngockhoi96.dev
- Owner: anIcedAntFA
- Created: 2024-04-30T03:17:41.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-22T15:34:31.000Z (5 days ago)
- Last Synced: 2024-09-23T01:30:57.757Z (5 days ago)
- Topics: blog, cloudflare, markdown, mdx, nextjs, postcss, react-hook-form, react-testing-library, reactjs, storybook, typescript, velite, vercel, vitest, zod, zustand
- Language: TypeScript
- Homepage: https://blog.ngockhoi96.dev
- Size: 5.98 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Cloudflare integration
Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
- `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
- `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
- `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
> **Note:** while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md#recommended-workflow))
### Bindings
Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
You can use bindings during development, when previewing locally your application and of course in the deployed application:
- To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
- To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
#### KV Example
`c3` has added for you an example showing how you can use a KV binding.
In order to enable the example:
- Search for javascript/typescript lines containing the following comment:
```ts
// KV Example:
```
and uncomment the commented lines below it.
- Do the same in the `wrangler.toml` file, where
the comment is:
```
# KV Example:
```
- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
```bash
npm run cf-typegen
# or
yarn cf-typegen
# or
pnpm cf-typegen
# or
bun cf-typegen
```
After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.