Repository: o1-labs/zkapp-cli
Pull request #697 (2024-09-30 16:47:23)

Update nextjs project starter to use TS + App Router
Updates the project starter to use the latest version of Nextjs with app router and no src directory. Removes the js project option. Closes
https://github.com/o1-labs/zkapp-cli/issues/583
https://github.com/o1-labs/zkapp-cli/issues/400

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/o1-labs/zkapp-cli/pull/697?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 100.00%. Comparing base [(`86e13f7`)](https://app.codecov.io/gh/o1-labs/zkapp-cli/commit/86e13f74cac767d34acd966ebed1b969dbdaf87d?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs) to head [(`e26047d`)](https://app.codecov.io/gh/o1-labs/zkapp-cli/commit/e26047da4372ec3f771832e82cfa818af841eaff?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs).

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff            @@
##              main      #697   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           11        11           
  Lines         1491      1475   -16     
  Branches       312       300   -12     
=========================================
- Hits          1491      1475   -16     
```

| [Flag](https://app.codecov.io/gh/o1-labs/zkapp-cli/pull/697/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs) | Coverage Δ | |
|---|---|---|
| [unittests](https://app.codecov.io/gh/o1-labs/zkapp-cli/pull/697/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs) | `100.00% <100.00%> (ø)` | |

Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs#carryforward-flags-in-the-pull-request-comment) to find out more.

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/o1-labs/zkapp-cli/pull/697?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=o1-labs).


Patch:
diff --git a/.gitignore b/.gitignore
index 4da7741..85f1306 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ coverage
 
 # Editor
 .vscode
+.idea
 
 # System
 .DS_Store
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2bf408..43bede4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## Unreleased
 
+## [0.21.7](https://github.com/o1-labs/zkapp-cli/compare/0.21.6...0.21.7) - 2024-09-19
+
+### Changed
+
+- Updated Next.js project starter to use app router and skip `src` directory
+- Forces TS in Next.js projects
+
 ## [0.21.6](https://github.com/o1-labs/zkapp-cli/compare/0.21.5...0.21.6) - 2024-09-03
 
 ### Fixed
diff --git a/package.json b/package.json
index 77400f6..cecd704 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkapp-cli",
-  "version": "0.21.6",
+  "version": "0.21.7",
   "description": "CLI to create zkApps (zero-knowledge apps) for Mina Protocol",
   "homepage": "https://github.com/o1-labs/zkapp-cli/",
   "repository": {
diff --git a/src/bin/index.js b/src/bin/index.js
index db20725..296aa25 100755
--- a/src/bin/index.js
+++ b/src/bin/index.js
@@ -48,7 +48,7 @@ yargs(hideBin(process.argv))
     // chalk.reset is a hack to force the terminal to retain a line break below
     chalk.reset(
       `
-
+      
          __         _         
         /_ |       | |        
      ___ | |   __ _| |__  ___ 
diff --git a/src/lib/project.js b/src/lib/project.js
index d1d4131..c7683b0 100644
--- a/src/lib/project.js
+++ b/src/lib/project.js
@@ -7,7 +7,8 @@ import url from 'node:url';
 import util from 'node:util';
 import ora from 'ora';
 import shell from 'shelljs';
-import customNextIndex from '../lib/ui/next/customNextIndex.js';
+import customNextPage from '../lib/ui/next/customNextPage.js';
+import customNextLayout from '../lib/ui/next/customNextLayout.js';
 import customNuxtIndex from '../lib/ui/nuxt/customNuxtIndex.js';
 import nuxtGradientBackground from '../lib/ui/nuxt/nuxtGradientBackground.js';
 import customLayoutSvelte from '../lib/ui/svelte/customLayoutSvelte.js';
@@ -314,12 +315,13 @@ async function scaffoldNext(projectName) {
   // set the project name and default flags
   // https://nextjs.org/docs/api-reference/create-next-app#options
   let args = [
-    'create-next-app@14.2.3',
+    'create-next-app@14.2.12',
     'ui',
     '--use-npm',
-    '--src-dir',
+    '--no-src-dir',
+    '--ts',
     '--import-alias "@/*"',
-    '--no-app',
+    '--app',
   ];
 
   spawnSync('npx', args, {
@@ -328,19 +330,12 @@ async function scaffoldNext(projectName) {
   });
 
   shell.rm('-rf', path.join('ui', '.git')); // Remove NextJS' .git; we will init .git in our monorepo's root.
-  // Read in the NextJS config file and add the middleware.
 
-  let useTypescript = true;
-  try {
-    // Determine if generated project is a ts project by looking for a tsconfig file
-    fs.readFileSync(path.join('ui', 'tsconfig.json'));
-  } catch (err) {
-    if (err.code !== 'ENOENT') {
-      console.error(err);
-    }
-    useTypescript = false;
-  }
+  // Removes create-next-app assets
+  fs.emptyDirSync(path.join('ui', 'public'));
+  fs.emptyDirSync(path.join('ui', 'app'));
 
+  // Read in the NextJS config file and add the middleware.
   const nextConfig = fs.readFileSync(
     path.join('ui', 'next.config.mjs'),
     'utf8'
@@ -354,8 +349,9 @@ const __dirname = path.dirname(__filename);
 
 `;
   newNextConfig += nextConfig.replace(
-    /^};(.*?)$/gm, // Search for the last '};' in the file.
+    '};',
     `
+  reactStrictMode: false,
   webpack(config, { isServer }) {
     if (!isServer) {
       config.resolve.alias = {
@@ -390,37 +386,36 @@ const __dirname = path.dirname(__filename);
 };`
   );
 
-  // This prevents usEffect from running twice on initial mount.
-  newNextConfig = newNextConfig.replace(
-    'reactStrictMode: true',
-    'reactStrictMode: false'
-  );
-
   fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig);
 
-  const indexFileName = useTypescript ? 'index.tsx' : 'index.js';
+  const pageFileName = 'page.tsx';
 
   fs.writeFileSync(
-    path.join('ui', 'src/pages', indexFileName),
-    customNextIndex,
+    path.join('ui', 'app', pageFileName),
+    customNextPage,
+    'utf8'
+  );
+
+  const layoutFileName = 'layout.tsx';
+
+  fs.writeFileSync(
+    path.join('ui', 'app', layoutFileName),
+    customNextLayout,
     'utf8'
   );
 
   // Adds landing page components directory and files to NextJS project.
   fs.copySync(
     path.join(__dirname, 'ui', 'next', 'components'),
-    path.join('ui', 'src', 'components')
+    path.join('ui', 'components')
   );
 
   // Adds landing page style directory and files to NextJS project.
   fs.copySync(
     path.join(__dirname, 'ui', 'next', 'styles'),
-    path.join('ui', 'src', 'styles')
+    path.join('ui', 'styles')
   );
 
-  // Removes create-next-app assets
-  fs.emptyDirSync(path.join('ui', 'public'));
-
   // Adds landing page assets directory and files to NextJS project.
   fs.copySync(
     path.join(__dirname, 'ui', 'next', 'assets'),
@@ -452,23 +447,26 @@ const __dirname = path.dirname(__filename);
     "jsx": "preserve",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
 `;
 
-  if (useTypescript) {
-    fs.writeFileSync(path.join('ui', 'tsconfig.json'), tsconfig);
+  fs.writeFileSync(path.join('ui', 'tsconfig.json'), tsconfig);
 
-    // Add a script to the package.json
-    let x = fs.readJsonSync(path.join('ui', 'package.json'));
-    x.scripts['ts-watch'] = 'tsc --noEmit --incremental --watch';
-    x.scripts['build'] = 'next build --no-lint';
-    x.type = 'module';
-    fs.writeJSONSync(path.join('ui', 'package.json'), x, { spaces: 2 });
-  }
+  // Add a script to the package.json
+  let x = fs.readJsonSync(path.join('ui', 'package.json'));
+  x.scripts['ts-watch'] = 'tsc --noEmit --incremental --watch';
+  x.scripts['build'] = 'next build --no-lint';
+  x.type = 'module';
+  fs.writeJSONSync(path.join('ui', 'package.json'), x, { spaces: 2 });
 
   if (useGHPages) {
     const isWindows = process.platform === 'win32';
@@ -510,13 +508,6 @@ const __dirname = path.dirname(__filename);
     return config;`
     );
 
-    // update page extensions
-    newNextConfig = newNextConfig.replace(
-      'reactStrictMode: false,',
-      `reactStrictMode: false,
-  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],`
-    );
-
     fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig);
 
     // Add some scripts to the package.json
@@ -548,42 +539,23 @@ const __dirname = path.dirname(__filename);
     );
     shell.cd('..');
 
-    const appFileName = useTypescript ? '_app.tsx' : '_app.js';
-    const appPagesFileName = useTypescript ? '_app.page.tsx' : '_app.page.js';
-    const indexFileName = useTypescript ? 'index.tsx' : 'index.js';
-    const indexPagesFileName = useTypescript
-      ? 'index.page.tsx'
-      : 'index.page.js';
-    const reactCOIServiceWorkerFileName = useTypescript
-      ? 'reactCOIServiceWorker.tsx'
-      : 'reactCOIServiceWorker.js';
-    shell.mv(
-      path.join('ui', 'src/pages', appFileName),
-      path.join('ui', 'src/pages', appPagesFileName)
-    );
-    shell.mv(
-      path.join('ui', 'src/pages', indexFileName),
-      path.join('ui', 'src/pages', indexPagesFileName)
-    );
+    const reactCOIServiceWorkerFileName = 'reactCOIServiceWorker.tsx';
 
-    let appFile = fs.readFileSync(
-      path.join('ui', 'src', 'pages', appPagesFileName),
+    let pageFile = fs.readFileSync(
+      path.join('ui', 'app', pageFileName),
       'utf8'
     );
 
-    appFile = appFile.replace(
+    pageFile = pageFile.replace(
       'export default function',
       `import './reactCOIServiceWorker';
 
 export default function`
     );
-    fs.writeFileSync(
-      path.join('ui', 'src', 'pages', appPagesFileName),
-      appFile
-    );
+    fs.writeFileSync(path.join('ui', 'app', pageFileName), pageFile);
 
     fs.writeFileSync(
-      path.join('ui', 'src', 'pages', reactCOIServiceWorkerFileName),
+      path.join('ui', 'app', reactCOIServiceWorkerFileName),
       `export {};
 
 function loadCOIServiceWorker() {
diff --git a/src/lib/ui/next/components/GradientBG.js b/src/lib/ui/next/components/GradientBG.js
index bc43401..10ae2f6 100644
--- a/src/lib/ui/next/components/GradientBG.js
+++ b/src/lib/ui/next/components/GradientBG.js
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import styles from '@/styles/Home.module.css';
+import styles from '../styles/Home.module.css';
 import { useEffect, useState, useRef } from 'react';
 
 export default function GradientBG({ children }) {
diff --git a/src/lib/ui/next/customNextLayout.js b/src/lib/ui/next/customNextLayout.js
new file mode 100644
index 0000000..b1ec8e6
--- /dev/null
+++ b/src/lib/ui/next/customNextLayout.js
@@ -0,0 +1,18 @@
+export default `import "../styles/globals.css";
+
+export const metadata = {
+  title: 'Mina zkApp UI',
+  description: 'built with o1js',
+  icons: {
+    icon: '/assets/favicon.ico',
+  },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+`;
diff --git a/src/lib/ui/next/customNextIndex.js b/src/lib/ui/next/customNextPage.js
similarity index 90%
rename from src/lib/ui/next/customNextIndex.js
rename to src/lib/ui/next/customNextPage.js
index 483ed7f..c5ef9de 100644
--- a/src/lib/ui/next/customNextIndex.js
+++ b/src/lib/ui/next/customNextPage.js
@@ -1,26 +1,26 @@
-export default `
+export default `'use client';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useEffect } from 'react';
 import GradientBG from '../components/GradientBG.js';
 import styles from '../styles/Home.module.css';
-import heroMinaLogo from '../../public/assets/hero-mina-logo.svg';
-import arrowRightSmall from '../../public/assets/arrow-right-small.svg';
+import heroMinaLogo from '../public/assets/hero-mina-logo.svg';
+import arrowRightSmall from '../public/assets/arrow-right-small.svg';
 
 export default function Home() {
   useEffect(() => {
     (async () => {
       const { Mina, PublicKey } = await import('o1js');
-      const { Add } = await import('../../../contracts/build/src/');
+      const { Add } = await import('../../contracts/build/src/');
 
       // Update this to use the address (public key) for your zkApp account.
       // To try it out, you can try this address for an example "Add" smart contract that we've deployed to
-      // Testnet B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA.
+      // Testnet B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5.
       const zkAppAddress = '';
       // This should be removed once the zkAppAddress is updated.
       if (!zkAppAddress) {
         console.error(
-          'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA'
+          'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5'
         );
       }
       //const zkApp = new Add(PublicKey.fromBase58(zkAppAddress))
@@ -58,7 +58,7 @@ export default function Home() {
           </div>
           <p className={styles.start}>
             Get started by editing
-            <code className={styles.code}> src/pages/index.js</code> or <code className={styles.code}> src/pages/index.tsx</code>
+            <code className={styles.code}> app/page.tsx</code>
           </p>
           <div className={styles.grid}>
             <a
diff --git a/src/lib/ui/next/styles/globals.css b/src/lib/ui/next/styles/globals.css
index 5c18b7f..6104ba2 100644
--- a/src/lib/ui/next/styles/globals.css
+++ b/src/lib/ui/next/styles/globals.css
@@ -1,24 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @font-face {
   font-family: 'ABC Monument Grotesk';
   font-style: normal;
   font-weight: normal;
-  src: url('/assets/fonts/ABCMonumentGrotesk-Regular.woff2') format('woff2'),
-    url('/assets/fonts/ABCMonumentGrotesk-Regular.woff') format('woff');
+  src: url('../public/assets/fonts/ABCMonumentGrotesk-Regular.woff2') format('woff2'),
+  url('../public/assets/fonts/ABCMonumentGrotesk-Regular.woff') format('woff');
 }
 
 @font-face {
   font-family: 'ABC Monument Grotesk Light';
   font-style: normal;
-  src: url('/assets/fonts/ABCMonumentGrotesk-Light.woff2') format('woff2'),
-    url('/assets/fonts/ABCMonumentGrotesk-Light.woff') format('woff');
+  src: url('../public/assets/fonts/ABCMonumentGrotesk-Light.woff2') format('woff2'),
+  url('../public/assets/fonts/ABCMonumentGrotesk-Light.woff') format('woff');
 }
 
 @font-face {
   font-family: 'ABC Monument Grotesk Bold';
   font-style: normal;
   font-weight: bold;
-  src: url('/assets/fonts/ABCMonumentGrotesk-Bold.woff2') format('woff2'),
-    url('/assets/fonts/ABCMonumentGrotesk-Bold.woff') format('woff');
+  src: url('../public/assets/fonts/ABCMonumentGrotesk-Bold.woff2') format('woff2'),
+  url('../public/assets/fonts/ABCMonumentGrotesk-Bold.woff') format('woff');
 }
 
 :root {
diff --git a/src/lib/ui/nuxt/customNuxtIndex.js b/src/lib/ui/nuxt/customNuxtIndex.js
index 6d5e9a9..c8ad4bb 100644
--- a/src/lib/ui/nuxt/customNuxtIndex.js
+++ b/src/lib/ui/nuxt/customNuxtIndex.js
@@ -126,12 +126,12 @@ export default {
 
       // Update this to use the address (public key) for your zkApp account.
       // To try it out, you can try this address for an example "Add" smart contract that we've deployed to
-      // Testnet B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA.
+      // Testnet B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5.
       const zkAppAddress = ''
       // This should be removed once the zkAppAddress is updated.
       if (!zkAppAddress) {
         console.error(
-          'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA',
+          'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5',
         )
       }
       // const zkApp = new Add(PublicKey.fromBase58(zkAppAddress))
diff --git a/src/lib/ui/svelte/customPageSvelte.js b/src/lib/ui/svelte/customPageSvelte.js
index 11d0db1..aec8705 100644
--- a/src/lib/ui/svelte/customPageSvelte.js
+++ b/src/lib/ui/svelte/customPageSvelte.js
@@ -11,12 +11,12 @@ export default `
 
     // Update this to use the address (public key) for your zkApp account.
     // To try it out, you can try this address for an example "Add" smart contract that we've deployed to
-    // Testnet B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA .
+    // Testnet B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5 .
     const zkAppAddress = ''
     // This should be removed once the zkAppAddress is updated.
     if (!zkAppAddress) {
       console.error(
-        'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA',
+        'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5',
       )
     }
     //const zkApp = new Add(PublicKey.fromBase58(zkAppAddress))


Test patch:
diff --git a/src/lib/project.test.js b/src/lib/project.test.js
index c497d70..c7272b5 100644
--- a/src/lib/project.test.js
+++ b/src/lib/project.test.js
@@ -205,12 +205,13 @@ describe('project.js', () => {
       expect(spawnSync).toHaveBeenCalledWith(
         'npx',
         [
-          'create-next-app@14.2.3',
+          'create-next-app@14.2.12',
           'ui',
           '--use-npm',
-          '--src-dir',
+          '--no-src-dir',
+          '--ts',
           '--import-alias "@/*"',
-          '--no-app',
+          '--app',
         ],
         {
           stdio: 'inherit',
@@ -621,12 +622,13 @@ describe('project.js', () => {
       expect(spawnSync).toHaveBeenCalledWith(
         'npx',
         [
-          'create-next-app@14.2.3',
+          'create-next-app@14.2.12',
           'ui',
           '--use-npm',
-          '--src-dir',
+          '--no-src-dir',
+          '--ts',
           '--import-alias "@/*"',
-          '--no-app',
+          '--app',
         ],
         {
           stdio: 'inherit',