👉 DON'T FORGET TO: yarn build

• after every git pull or
• when starting a new project and deploying on the server

commencer une projet

as of 2025-08-09

step 1: npm create next-app -e https://github.com/La-Capsule-Bootcamp/nextjs-template myapp

• this will create a new folder, named myapp, containing the template

step 2: options I choose:

✔ Would you like to use TypeScript? … *No*
✔ Would you like to use ESLint? …  *No*
✔ Would you like to use Tailwind CSS? … *No* 
✔ Would you like your code inside a `src/` directory? … *No*
✔ Would you like to use App Router? (recommended) … *No* 
✔ Would you like to use Turbopack for `next dev`? … *No* 
✔ Would you like to customize the import alias (`@/*` by default)? … *No* 
Creating a new Next.js app in /Users/nick/Documents/samurai02web-eslint-noapp.

OBE

yarn create next-app -e https://github.com/La-Capsule-Bootcamp/nextjs-template myapp

• upgrade to latest nextJS (template has old): yarn add next@latest react@latest react-dom@latest

installations typic:

1. reducers: yarn add react-redux @reduxjs/toolkit yarn add react-redux yarn add redux-persist

2. fontAwesome:

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

lancer frontend

• yarn dev
• localhost:3001

getting Input without missing the last character

This example is of inside the InputPassword component that get's passed to the Login Component.

  const getPassword = (enteredText) => {
    setPassword(enteredText.target.value);
    props.sendPasswordBackToParent(enteredText.target.value);
  };

    return (
    <div>
      <input
        onChange={getPassword}
      />
      <div>
    )

fonctionnnement

• de un composant React
• JSX

import styles from "../styles/Home.module.css"; // <--- le composant

function Home() {
  return (
    <div>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>
    </div>
  );
}

export default Home; // <--- Export du composant afin qu'il s'affiche

Ternary (un ligne if - else)

{launchBool ? null : launchBtn}

plusiers className

import styles from "../styles/Home.module.css";

let h1Title = (
  <h1 className={`${styles.title} ${styles.titleSecond}`}>
    Welcome to <a href="https://nextjs.org">Next.js!</a>
  </h1>
);

Home.module.css

.title {
  line-height: 1.15;
  font-size: 4rem;
}
.titleSecond{
  background-color: green;
}

plusiers className dans une useState()

const [bookmarkStyle, bookmarkStyleSetter] = useState(${styles.bookmarkIcon})

function Article(props) {
  const [bookmarkStyle, bookmarkStyleSetter] = useState(
    `${styles.bookmarkIcon}`
  );
  const dispatch = useDispatch();
  const declencerBookmark = (colis) => {
    dispatch(ajouteATableauArticlesPrefere(colis));
    bookmarkStyleSetter(bookmarkStyle + ` ${styles.bookmarkGreen}`);
  };

  return (
    <div className={styles.articles}>
      /* code */
      <FontAwesomeIcon
        icon={faBookmark}
        className={bookmarkStyle}
        onClick={() => declencerBookmark(props.title)}
      />
      /* code */
    </div>
  );
}

export default Article;

passer le élément a sont onClick()

import styles from "../styles/Dice.module.css";

function Dice(props) {
  const handleDieClick = (element) => {
    console.log("--> 🎲 est cliqué ");
    console.log(element);
  };

  return (
    <div>
      <img
        className={styles.dice}
        src={`${props.number}.png`}
        alt={props.number}
        onClick={(e) => handleDieClick(e.target)}
      />
    </div>
  );
}

export default Dice;

Deployment environment with yarn and pm2 ecosystem files

In this environment we needed to add the interpreter

    {
      name: "kyber-vision-web-uploader-02",
      script: "yarn",
      args: "start",
      interpreter: "/bin/bash",
      cwd: "/home/luke/applications/kyber-vision-web-uploader-02/",
      log_date_format: "YYYY-MM-DD HH:mm Z",
      out_file: "/home/luke/.pm2/logs/combined.log", // Standard output log
      error_file: "/home/luke/.pm2/logs/combined-error.log", // Error log
      env: {
        NODE_ENV: "production",
        PORT: 8002, // The port the app will listen on
      },
    },

• Server: KyberDev
• which yarn yeilds: /usr/bin/yarn
  • meaning global installation
• Referennces: https://github.com/yarnpkg/yarn/issues/6124#issuecomment-541145153

In this environment we did not need to run the interperter

    {
      name: "The404Front",
      script: "yarn",
      args: "start",
      cwd: "/home/dashanddata_user/applications/The404Front/",
      log_date_format: "YYYY-MM-DD HH:mm Z",
      out_file: "/home/dashanddata_user/.pm2/logs/combined.log", // Standard output log
      error_file: "/home/dashanddata_user/.pm2/logs/combined-error.log", // Error log
      env: {
        NODE_ENV: "production",
        PORT: 8001, // The port the app will listen on
      },
    },

• Server: DevelopmentServer
• which yarn yeilds: /home/dashanddata_user/.nvm/versions/node/v22.11.0/bin/yarn
  • meaning Yarn is installed locally within the nvm and tied to the specific version of Node.js

Troubleshooting

Start then fails with pm2 error log for NextJS app:

2025-01-08 17:31 +00:00: /home/nick/.nvm/versions/node/v22.12.0/bin/yarn: line 2: process.env.COREPACK_ENABLE_DOWNLOAD_PROMPT??=1: command not found
2025-01-08 17:31 +00:00: /home/nick/.nvm/versions/node/v22.12.0/bin/yarn: line 3: syntax error near unexpected token `'./lib/corepack.cjs''
2025-01-08 17:31 +00:00: /home/nick/.nvm/versions/node/v22.12.0/bin/yarn: line 3: `require('./lib/corepack.cjs').runMain(['yarn', ...process.argv.slice(2)]);'

• this means that you added the interpreter line to the ecosystem.config.js file when you should not have
• example of the which yarn in this case is /home/nick/.nvm/versions/node/v22.12.0/bin/yarn