Currently my structure looks like this: https://i.imgur.com/jiZuN5D.png
And my index.js contains this code:
import AddStudentForm from "../lib/StudentForm";
import CreateCarForm from "../lib/StudentForm";
import SearchStudent from "../lib/SearchForm";
export default function Home() {
return (
<><title>351 Project</title>
<link rel="stylesheet" type="text/css" href="styles/globals.css" />
<body>
<div id="wrapper">
<nav>
<ul>
<li><a href="index.html" title="Homepage">Homepage</a></li>
<div class="dropdown">
<li class="dropbtn"><a href="student_advisor_notes.html" title="Student">Student information</a></li>
<div class="dropdown-content">
<a href="student_advisor_notes.js">Student/Advisor Notes</a>
<a href="#">N/A</a>
</div>
</div>
<li><a href="blank.html" title="Advisor">Advisor Information</a></li>
<div class="dropdown">
<li class="dropbtn"><a href="blank.html" title="Information">Information Station</a></li>
<div class="dropdown-content">
<a href="#">Schedule of Classes</a>
<a href="#">Common Caveats</a>
<a href="#">Degree Evaluation</a>
</div>
</div>
<li><a href="blank.html" title="Contact">Account Name</a></li>
</ul>
</nav>
<div id="border">
<main>
<h1>Advising System</h1>
<p>Created by: </p>
<p>Don't forget to register for classes, here are the times you can register:<br></br>
</p>
<table>
<tbody><tr>
<th>From</th>
<th>Begin Time</th>
<th>To</th>
<th>End Time</th>
</tr>
<tr>
<td>Nov 04, 2021</td>
<td>07:30 am</td>
<td>Nov 12, 2021</td>
<td>11:59 pm</td>
</tr>
<tr>
<td>Dec 13, 2021</td>
<td>08:00 am</td>
<td>Dec 17, 2021</td>
<td>11:59 pm</td>
</tr>
<tr>
<td>Jan 03, 2022</td>
<td>08:00 am</td>
<td>Jan 18, 2022</td>
<td>11:59 pm</td>
</tr>
<tr>
<td>Jan 03, 2022</td>
<td>08:00 am</td>
<td>Jan 18, 2022</td>
<td>11:59 pm</td>
</tr>
</tbody></table>
<div class="box">
<h1>Add a Student</h1>
<AddStudentForm />
<h1>Search for Student</h1>
<SearchStudent />
</div>
<h3>About us:</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Tellus mauris a diam maecenas sed. Donec et odio pellentesque diam volutpat commodo sed. Ac tincidunt vitae semper quis. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Etiam tempor orci eu lobortis elementum. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. In massa tempor nec feugiat nisl. Lorem dolor sed viverra ipsum nunc.</p>
</main>
<footer>
Copyright © 2020 <br></br>
<a href="mailto:[email protected]">[email protected]</a>:: <a href="placeholder.html" title="Contact Form">Contact Form</a>
</footer>
</div>
</div>
</body></>
)
}
It works fine and when i load up the page on localhost:3000(loads index.js), it shows me the page correctly and all the forms works etc. My question is, how do i make other pages work like this? I have a page under public that is called student_advisor_notes and when i make it a .js, it just displays plain text when i go to it, but if i make it an HTML then the forms dont work. I know this is a dumb question, but im completely new to all this. Basically, how do i structure my files to make it so that the webpages load and can be displayed properly but also run the code inside them, like my index.js does?