Update nextjs project starter to use TS + App Router

.gitignore

@@ -5,6 +5,7 @@ coverage
 
 # Editor
 .vscode
+.idea
 
 # System
 .DS_Store

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

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": {

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(
       `
-
+      
          __         _         
         /_ |       | |        
      ___ | |   __ _| |__  ___ 

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 = [
-    '[email protected].3',
+    '[email protected].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() {

src/lib/project.test.js

@@ -205,12 +205,13 @@ describe('project.js', () => {
       expect(spawnSync).toHaveBeenCalledWith(
         'npx',
         [
-          '[email protected].3',
+          '[email protected].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',
         [
-          '[email protected].3',
+          '[email protected].12',
           'ui',
           '--use-npm',
-          '--src-dir',
+          '--no-src-dir',
+          '--ts',
           '--import-alias "@/*"',
-          '--no-app',
+          '--app',
         ],
         {
           stdio: 'inherit',

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 }) {

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>
+  );
+}
+`;

src/lib/ui/next/customNextIndex.js → 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

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 {