{"id":27134688,"url":"https://github.com/anupammo/mysql-nextjs","last_synced_at":"2026-04-10T01:02:16.282Z","repository":{"id":286633107,"uuid":"962031517","full_name":"anupammo/mysql-nextjs","owner":"anupammo","description":"A Next.js web application by Anupam Mondal featuring seamless integration with MySQL. This project demonstrates dynamic data fetching, API routes, and responsive frontend design using Bootstrap. Perfect for learning how to build scalable, database-driven web apps. Visit Anupam's portfolio for more projects and insights!","archived":false,"fork":false,"pushed_at":"2025-04-07T15:10:01.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T23:56:14.741Z","etag":null,"topics":["database","database-management","db","db-connection","mysql-database","nextjs15","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://anupammondal.in/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anupammo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-07T14:42:34.000Z","updated_at":"2025-04-07T15:10:04.000Z","dependencies_parsed_at":"2025-04-09T23:49:56.330Z","dependency_job_id":null,"html_url":"https://github.com/anupammo/mysql-nextjs","commit_stats":null,"previous_names":["anupammo/mysql-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anupammo/mysql-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anupammo%2Fmysql-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anupammo%2Fmysql-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anupammo%2Fmysql-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anupammo%2Fmysql-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anupammo","download_url":"https://codeload.github.com/anupammo/mysql-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anupammo%2Fmysql-nextjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261652879,"owners_count":23190357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["database","database-management","db","db-connection","mysql-database","nextjs15","reactjs","typescript"],"created_at":"2025-04-08T00:49:15.270Z","updated_at":"2025-12-30T22:26:08.941Z","avatar_url":"https://github.com/anupammo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Next.js Project with MySQL Integration**\n\n## **Description**\nThis project is a modern web application built using **Next.js** with **MySQL database integration**. It demonstrates how to connect a Next.js application to a MySQL database, fetch data dynamically, and display it on the frontend. The application is styled using Bootstrap for responsiveness and an enhanced user interface.\n\n---\n\n## **Features**\n- MySQL database integration.\n- API routes for secure data fetching.\n- Dynamic rendering of database tables on the frontend.\n- Integration of Bootstrap for styling and responsive design.\n- Clear folder structure for scalability and extensibility.\n\n---\n\n## **Technologies Used**\n- **Next.js**: React-based framework for building modern web apps.\n- **MySQL**: Relational database management system for data storage.\n- **Bootstrap**: Framework for responsive design and UI components.\n- **JavaScript**: Programming language for both backend and frontend logic.\n\n---\n\n## **Getting Started**\n\n### **Prerequisites**\nEnsure the following tools are installed on your machine:\n- [Node.js](https://nodejs.org/) (version 16 or higher)\n- [MySQL](https://www.mysql.com/) server\n- [Git](https://git-scm.com/)\n- A code editor like [VS Code](https://code.visualstudio.com/)\n\n---\n\n### **Steps to Set Up the Project**\n\n#### **1. Clone the Repository**\n```bash\ngit clone https://github.com/anupammo/mysql-nextjs.git\ncd mysql-nextjs\n```\n\n#### **2. Install Dependencies**\nRun the following command to install project dependencies:\n```bash\nnpm install\n```\n\n#### **3. Set Up the Database**\n- Import the database schema from the `database/nextjs_db.sql` file:\n  ```bash\n  mysql -u root -p \u003c database/nextjs_db.sql\n  ```\n- Verify the database is set up by running:\n  ```bash\n  mysql -u root -p\n  SHOW DATABASES;\n  ```\n\n#### **4. Configure Environment Variables**\nCreate a `.env` file in the root directory and add the following:\n```env\nDB_HOST=localhost\nDB_USER=root\nDB_PASSWORD=yourpassword\nDB_NAME=nextjs_db\nDB_PORT=3307\n```\nReplace `yourpassword` with your MySQL root password (leave blank if no password).\n\n#### **5. Run the Development Server**\nStart the development server with:\n```bash\nnpm run dev\n```\nVisit [http://localhost:3000](http://localhost:3000) in your browser to view the application.\n\n---\n\n## **Folder Structure**\n```plaintext\nmy-nextjs-project/\n├── src/\n│   ├── app/\n│   │   ├── globals.css          # Global styles\n│   │   ├── layout.tsx           # Application layout\n│   │   └── page.tsx             # Main page\n│   └── api/\n│       └── employees\n│           └── route.js         # API route for fetching employee data\n├── database/\n│   └── nextjs_db.sql            # Database schema and sample data\n└── db.js                        # MySQL database connection\n├── .env                         # Environment variables\n├── package.json                 # Project dependencies\n└── README.md                    # Project documentation\n```\n\n---\n\n## **Usage**\n- The application dynamically renders data from the `employees` table in MySQL.\n- You can add, modify, or delete rows directly in the database, and the changes will reflect in the app.\n\n---\n\n## **Contributing**\nContributions are welcome! Follow these steps:\n1. Fork the repository.\n2. Create a new branch:\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n3. Commit your changes:\n   ```bash\n   git commit -m \"Add your message here\"\n   ```\n4. Push the branch:\n   ```bash\n   git push origin feature/your-feature-name\n   ```\n5. Open a pull request.\n\n---\n\n## **License**\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n## **Contact**\nFor questions or support, feel free to reach out to [Anupam Mondal](https://anupammondal.in/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanupammo%2Fmysql-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanupammo%2Fmysql-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanupammo%2Fmysql-nextjs/lists"}