ChitChat Setup Instructions

frontend
    ├── next.config.mjs
    ├── next-env.d.ts
    ├── package.json
    ├── package-lock.json
    ├── postcss.config.mjs
    ├── README.md
    ├── src
    │   └── pages
    │       ├── _app.tsx
    │       └── index.tsx
    ├── tailwind.config.ts
    └── tsconfig.json

Step 1: Create Project Directory

Open your terminal and run the following commands:

mkdir ChitChat
cd ChitChat
    

Step 2: Create Next.js Frontend

Create a new Next.js app without TypeScript:

npx create-next-app frontend
    

Step 3: Navigate to the Frontend Directory

cd frontend
    

Step 4: Clean Up the Directory

Delete the src or app directory if it exists, as well as the styles directory:

rm -rf src styles
    

Step 5: Create a New Source Directory

mkdir src
    

Step 6: Create Pages Directory

Inside the src directory, create a new pages directory:

mkdir src/pages
    

Step 7: Create index.js File

Inside the pages directory, create a file called index.js:

touch src/pages/index.js
    

Step 8: Add HTML to index.js

Open src/pages/index.js and add the following code:

const Home = () => {
    return (
        <div>
            <h1>Hello Home Page</h1>
            <p>Welcome to ChitChat!</p>
        </div>
    );
};

export default Home;
    

Step 9: Start the Development Server

You can now start your development server:

npm run dev
    

Your Next.js app should now be set up and running!

It will display "Hello Home Page" at http://localhost:3000. You can add more HTML components as needed directly in the JSX format.