Day 6 - The instant new page
The route to happiness and fast load times
Nextjs versions 13 and above have a simple systems for adding new pages. Nextjs uses directories/folders to determine what to do with different files. In the first changes I did, I changed the “page.js” file in the app directory. For Nextjs 13 that is the home page file. If you want another page with another url, you make a directory inside the app directory with a file named page.js in it. Nextjs magically makes that page available under a path with the name of the directory. So I made a new page for /me-and-my-site.
You can see the code changes on the GitHub pull request page. The green changes are added code, the red changes are deleted code. It is well worth taking a few minutes to look at a pull request, they tell you what changes in code are needed to change an application. And, if the app is being developed well, each pull request is just for a small change so it’s not too hard to read.
And here’s what it looks like:
A terrible website with one exciting feature
Visually, it has basically no styling, so it looks terrible. But forgetting that for a moment, it has a title in an <h1> tag and some text in a <p> tag. There is also a sub-heading that says "Back to home". This tiny little thing makes me stupidly excited. It uses a feature of Nextjs called a Link component. When a Nextjs Link component is used to link to a page on the same site, then the content of that linked page is fetched in the background ready to be navigated to as soon as the user clicks the link. The result is that a user can go from one page to the other in such a smooth and fast load as the browser does not need to make a call to the internet after they have click the button.
The most basic styling
Finally, I needed to do something about the styling. Styles are complicated, and I’ll need to make some decisions about how I’m going to approach it later. For now, I decided to basically copy and paste what is currently being done for the home page. So I’ve added the class ’main’ to the <main> tag and then copied the card stylings for <p> and <h2> tags and slightly adjusted one for <h1> tags. It no longer looks like the worst website ever, although it doesn’t look good either. One for a future day methinks. Next I’m gonna look at images.
