It seems like I might be overlooking something simple, but after searching online, I haven't been able to find any information about this particular issue. In my straightforward NextJS project, the folder structure looks like this:
├── pages
| ├── index.js
| ├── _app.tsx
| └── hello.tsx
Each file has its own CSS styling, which I left out for clarity. Most of my website content is in the _app.tsx file, and I added hello.tsx to test page routing. According to what I understand, if I go to http://localhost:3000/hello, I should see the content from hello.tsx. However, even though the URL suggests otherwise, the content from _app.tsx is displaying instead. What could be causing this?
The contents of hello.tsx are as follows:
export default function hello() {
return <h1>Hello World</h1>
}
The contents of _app.tsx are as follows:
import './App.css';
import '../styles/globals.css';
import Tiles from '../components/tiles';
function App() {
return (
<some basic jsx/>
);
}
export default App;
Any help would be greatly appreciated. It feels like the solution is right in front of me, but I just can't seem to figure it out.