feat(template): add js-script-next-js template (#231)

* feat(template): add js-script-next-js template

* fix add packages/* in pnpm-workspace

* fix(template): name js script to hello-world

* fix js-script tempalte package.json

* fix(template): js-script isScriptDeployed

* fix(template): script info of hello-world.bc

* docs(template): update script descript in js-scrip template

Author: RetricSu

pnpm-workspace.yaml

@@ -1,3 +1,6 @@
 onlyBuiltDependencies:
   - cpu-features
   - secp256k1
+
+packages:
+  - "packages/*"

src/template/option.ts

@@ -8,14 +8,21 @@ export interface BareTemplateOption {
 
 const templates: Array<BareTemplateOption> = [
   {
-    name: 'Remix-Vite Bare Templates',
+    name: 'JS Script with Next.js fullstack template',
+    value: 'js-script-next-js',
+    description: 'A full-stack template with Next-js and ckb-js-vm script',
+    tag: ['next.js', 'tailwindcss', 'ckb-js-vm', 'typescript'],
+    author: 'retric@cryptape.com',
+  },
+  {
+    name: 'Rust Script with Remix-Vite fullstack template',
     value: 'remix-vite-template',
     description: 'A full-stack template with Remix-vite and ckb-script-templates',
     tag: ['remix', 'vite', 'tailwindcss', 'ckb-script-templates', 'typescript', 'rust'],
     author: 'retric@cryptape.com',
   },
   {
-    name: 'Next.js Bare Templates',
+    name: 'Rust Script with Next.js fullstack template',
     value: 'next-js-template',
     description: 'A full-stack template with Next.js framework and ckb-script-templates',
     tag: ['next.js', 'tailwindcss', 'ckb-script-templates', 'typescript', 'rust'],

templates/v3/js-script-next-js/README.md

@@ -0,0 +1,91 @@
+# offckb-template
+
+This is a Minimal Template for CKB Full-Stack Dapps generated by [offckb](https://github.com/RetricSu/offckb).
+
+Offckb does not do the magic. It just wraps the new CKB smart contract template and the CKB javascript Dapp framework into one mono-repo. Under the hook, it uses:
+
+- [ckb-js-vm](https://github.com/nervosnetwork/ckb-js-vm) for smart contract development
+- [next-js](https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app) and [ccc](https://github.com/ckb-devrel/ccc) for frontend development
+
+To start the project, install the dependecies:
+
+```bash
+pnpm i
+```
+
+## Script(Smart Contract)
+
+The on-chain script project is powered by [ckb-js-vm](https://github.com/nervosnetwork/ckb-js-vm) bootstrapped with [`create-ckb-js-vm-app`](https://github.com/nervosnetwork/ckb-js-vm).
+
+Build on-chain script:
+
+```bash
+pnpm build
+```
+
+Test on-chain script:
+
+```bash
+pnpm test
+```
+
+## dApp frontend development
+
+first, enter the frontend workspace:
+
+```sh
+cd frontend
+```
+
+start the app:
+
+```sh
+pnpm dev
+```
+
+change the CKB blockchain network:
+
+edit `.env` file:
+
+```bash
+NEXT_PUBLIC_NETWORK=devnet # devnet, testnet or mainnet
+```
+
+## Deploy to devnet/testnet with offckb
+
+Once you build your smart contracts, you can deploy them to CKB blockchain with [ckb-cli](https://github.com/nervosnetwork/ckb-cli) or any other tools.
+
+If you want to test them in devnet/testnet blockchain, then `offckb` might be the ideal selection.
+
+`offckb` will look for the `offckb.config.ts` file to read config information. so you will need to enter the frontend workspace to do the instruction:
+
+```sh
+cd frontend
+offckb deploy --network devnet
+```
+
+If successfully deployed, you will see the deploy script info for your smart contract recorded in the path recorded in the `offckb.config.ts` file.
+
+Every time you deploy a new version of your smart contracts, those script infos will be updated by `offckb` in the place recorded in `offckb.config.ts` and work out-of-box in your frontend.
+
+You can also deploy smart contracts to the CKB Testnet like this:
+
+```sh
+cd frontend
+offckb deploy --network testnet
+```
+
+and start your frontend Dapp targeting Testnet:
+
+edit `.env` file:
+
+```bash
+NEXT_PUBLIC_NETWORK=testnet # devnet, testnet or mainnet
+```
+
+```bash
+cd frontend
+pnpm dev
+```
+
+Note that the `mainnet` network is not supported in `offckb` since `offckb` is focusing on building a friendly development environment for CKB. To gain better security, it is recommended to use production tools like [ckb-cli](https://github.com/nervosnetwork/ckb-cli) to deploy smart contracts and do transactions for the CKB mainnet.

templates/v3/js-script-next-js/package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "pnpm -r run build",
+    "clean": "pnpm -r run clean",
+    "test": "pnpm -r run test",
+    "format": "pnpm -r run format"
+  },
+  "devDependencies": {
+    "prettier": "~3.5.3",
+    "prettier-plugin-organize-imports": "~4.1.0",
+    "rimraf": "~6.0.1",
+    "typescript": "~5.8.2"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}

templates/v3/js-script-next-js/packages/frontend/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_NETWORK=devnet

templates/v3/js-script-next-js/packages/frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

templates/v3/js-script-next-js/packages/frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

templates/v3/js-script-next-js/packages/frontend/README.md

@@ -0,0 +1,44 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## 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.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Targeting on Different CKB Networks
+
+edit `.env` file:
+
+```bash
+NEXT_PUBLIC_NETWORK=devnet # devnet, testnet or mainnet
+```
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

templates/v3/js-script-next-js/packages/frontend/app/favicon.ico

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+a {
+  @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600;
+}