Add nextjs structure (#2127)

* new structure

* feat: added next template

---------

Co-authored-by: Matthew <[email protected]>
Co-authored-by: Matias Benary <[email protected]>

src/messages.ts

@@ -1,73 +1,147 @@
 import chalk from 'chalk';
-import {trackingMessage} from './tracking';
-import {Contract, Frontend, ProjectName} from './types';
+import { trackingMessage } from './tracking';
+import { Contract, Frontend, FrontendMessage, ProjectName } from './types';
 
 if (process.env.NEAR_NO_COLOR) {
   chalk.level = 0;
 }
 
 export const show = (...args: unknown[]) => console.log(...args);
 
-export const welcome = () => show(chalk`
+export const welcome = () =>
+  show(chalk`
 {blue ======================================================}
 👋 {bold {green Welcome to Near!}} Learn more: https://docs.near.org/
 🔧 Let's get your project ready.
 {blue ======================================================}
 (${trackingMessage})`);
 
-export const setupFailed = () => show(chalk`{bold {red ==========================================}}
+export const setupFailed = () =>
+  show(chalk`{bold {red ==========================================}}
 {red ⛔️ There was a problem during the project setup}.
 Please refer to https://github.com/near/create-near-app README to troubleshoot.
 Notice: some platforms aren't supported (yet).
 {bold {red ==========================================}}`);
 
-export const successContractToText = (contract: Contract) => contract === 'none' ? '' : chalk`a smart contract in {bold ${contract === 'rs' ? 'Rust' : 'Typescript'}}`;
-export const successFrontendToText = (frontend: Frontend) => frontend === 'none' ? '' : chalk`a gateway using ${frontend === 'next' ? 'NextJS + React' : 'Vanilla-JS'}`;
-export const setupSuccess = (projectName: ProjectName, contract: Contract, frontend: Frontend, install: boolean) => show(chalk`
+export const successContractToText = (contract: Contract) =>
+  contract === 'none'
+    ? ''
+    : chalk`a smart contract in {bold ${
+      contract === 'rs' ? 'Rust' : 'Typescript'
+    }}`;
+
+const frontendTemplates: FrontendMessage = {
+  'next-page': 'NextJS (Classic)',
+  'next-app': 'NextJS (App Router)',
+  vanilla: 'Vanilla-JS',
+};
+
+export const successFrontendToText = (frontend: Frontend) =>
+  frontend === 'none'
+    ? ''
+    : chalk`a gateway using ${frontendTemplates[frontend]}`;
+
+export const setupSuccess = (
+  projectName: ProjectName,
+  contract: Contract,
+  frontend: Frontend,
+  install: boolean
+) =>
+  show(chalk`
 {green ======================================================}
-✅  Success! Created '${projectName}', ${successContractToText(contract)}${successFrontendToText(frontend)}.
-${contract === 'rs' ? chalk`🦀 If you are new to Rust please visit {bold {green https://www.rust-lang.org }}\n` : ''}
+✅  Success! Created '${projectName}', ${successContractToText(
+  contract
+)}${successFrontendToText(frontend)}.
+${
+  contract === 'rs'
+    ? chalk`🦀 If you are new to Rust please visit {bold {green https://www.rust-lang.org }}\n`
+    : ''
+}
 {bold {bgYellow {black Next steps}}}:
-${contractInstructions(projectName, contract, install)}${gatewayInstructions(projectName, frontend, install)}`);
+${contractInstructions(projectName, contract, install)}${gatewayInstructions(
+  projectName,
+  frontend,
+  install
+)}`);
 
-export const contractInstructions = (projectName: ProjectName, contract: Contract, install: boolean) => contract === 'none' ? '' : chalk`
+export const contractInstructions = (
+  projectName: ProjectName,
+  contract: Contract,
+  install: boolean
+) =>
+  contract === 'none'
+    ? ''
+    : chalk`
    - {inverse Navigate to your project}:
          {blue cd {bold ${projectName}}}
-${contract ==='ts' && !install ? chalk`   - {inverse Install all dependencies}
-         {blue npm {bold install}}` : 'Then:'}
+${
+  contract === 'ts' && !install
+    ? chalk`   - {inverse Install all dependencies}
+         {blue npm {bold install}}`
+    : 'Then:'
+}
    - {inverse Build your contract}:
-         ${contract === 'ts' ? chalk`{blue npm {bold run build}}` : chalk`{blue {bold ./build.sh}}`}
+         ${
+  contract === 'ts'
+    ? chalk`{blue npm {bold run build}}`
+    : chalk`{blue {bold ./build.sh}}`
+}
    - {inverse Test your contract} in the Sandbox:
-         ${contract === 'ts' ? chalk`{blue npm {bold run test}}` : chalk`{blue {bold ./test.sh}}`}
+         ${
+  contract === 'ts'
+    ? chalk`{blue npm {bold run test}}`
+    : chalk`{blue {bold ./test.sh}}`
+}
    - {inverse Deploy your contract} to NEAR TestNet with a temporary dev account:
-         ${contract === 'ts' ? chalk`{blue npm {bold run deploy}}` : chalk`{blue {bold ./deploy.sh}}`}
+         ${
+  contract === 'ts'
+    ? chalk`{blue npm {bold run deploy}}`
+    : chalk`{blue {bold ./deploy.sh}}`
+}
 🧠 Read {bold {greenBright README.md}} to explore further`;
 
-export const gatewayInstructions = (projectName: ProjectName, frontend: Frontend, install: boolean) => frontend === 'none' ? '' : chalk`
+export const gatewayInstructions = (
+  projectName: ProjectName,
+  frontend: Frontend,
+  install: boolean
+) =>
+  frontend === 'none'
+    ? ''
+    : chalk`
    - {inverse Navigate to your project}:
          {blue cd {bold ${projectName}}}
-${!install ? chalk`   - {inverse Install all dependencies}
-         {blue pnpm {bold install}}` : 'Then:'}
+${
+  !install
+    ? chalk`   - {inverse Install all dependencies}
+         {blue pnpm {bold install}}`
+    : 'Then:'
+}
    - {inverse Start your app}:
          {blue pnpm {bold run dev}}`;
 
-export const argsError = (msg: string) => show(chalk`{red Arguments error: {white ${msg}}}
+export const argsError = (msg: string) =>
+  show(chalk`{red Arguments error: {white ${msg}}}
 
 Run {blue npx create-near-app} without arguments, or use:
 npx create-near-app <projectName> [--frontend next|vanilla|none] [--contract rs|ts|none --tests rs|ts|none]`);
 
-export const unsupportedNodeVersion = (supported: string) => show(chalk`{red We support node.js version ${supported} or later}`);
+export const unsupportedNodeVersion = (supported: string) =>
+  show(chalk`{red We support node.js version ${supported} or later}`);
 
-export const windowsWarning = () => show(chalk`{bgYellow {black Notice: On Win32 please use WSL (Windows Subsystem for Linux).}}
+export const windowsWarning = () =>
+  show(chalk`{bgYellow {black Notice: On Win32 please use WSL (Windows Subsystem for Linux).}}
 https://docs.microsoft.com/en-us/windows/wsl/install
 Exiting now.`);
 
-export const directoryExists = (dirName: string) => show(chalk`{red This directory already exists! ${dirName}}`);
+export const directoryExists = (dirName: string) =>
+  show(chalk`{red This directory already exists! ${dirName}}`);
 
 export const creatingApp = () => show(chalk`\nCreating a new {bold NEAR dApp}`);
 
-export const depsInstall = () => show(chalk`
+export const depsInstall = () =>
+  show(chalk`
 {green Installing dependencies in a few folders, this might take a while.}
 `);
 
-export const depsInstallError = () => show(chalk.red('Error installing NEAR project dependencies'));
+export const depsInstallError = () =>
+  show(chalk.red('Error installing NEAR project dependencies'));

src/types.ts

@@ -1,7 +1,7 @@
 export type Contract = 'ts' | 'rs' | 'none';
 export const CONTRACTS: Contract[] = ['ts', 'rs', 'none'];
-export type Frontend = 'next' | 'vanilla' | 'none';
-export const FRONTENDS: Frontend[] = ['next', 'vanilla', 'none'];
+export type Frontend = 'next-app' | 'next-page' | 'vanilla' | 'none';
+export const FRONTENDS: Frontend[] = ['next-app' , 'next-page', 'vanilla', 'none'];
 export type TestingFramework = 'rs' | 'ts' | 'none';
 export const TESTING_FRAMEWORKS: TestingFramework[] = ['rs', 'ts', 'none'];
 export type App = 'contract' | 'gateway';
@@ -26,4 +26,8 @@ export type CreateGatewayParams = {
   frontend: Frontend,
   projectPath: string,
   templatesDir: string,
-}
+}
+
+export type FrontendMessage = {
+  [key in Exclude<Frontend, 'none'>]: string;
+};

src/user-input.ts

@@ -48,8 +48,10 @@ const testsChoices: Choices<TestingFramework> = [
   { title: 'Tests written in Rust', value: 'rs' },
   { title: 'Tests written in Typescript', value: 'ts' },
 ];
+
 const frontendChoices: Choices<Frontend> = [
-  { title: 'NextJs + React', description: 'A composable app built using Next.js, React and Near components', value: 'next' },
+  { title: 'NextJs (Classic)', description: 'A composable app built using Next.js, React and Near components', value: 'next-page' },
+  { title: 'NextJS (App Router)', description: 'A composable app built using Next.js, React and Near components', value: 'next-app' },
   { title: 'Vanilla JS', description: 'A framework-less web app with limited capabilities.', value: 'vanilla' },
 ];
 

templates/frontend/next-page/.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/frontend/next-page/README.md

@@ -0,0 +1,36 @@
+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.js`. 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.
+
+## 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/frontend/next-page/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

templates/frontend/next-page/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig;