Create an About Us Page inside the Next.js 13 App Directory
We'll cover the basics of building a new page in Next.js, specifically an "About Us" page. If you've used Next before, this will feel very similar to creating a new page in the pages directory.
While doing this we will also be introduced to some of the components that come with the template, such as the PageContainer, Main, Title, and Description components which you can check out in more detail here.
Instructor: [0:00] To create a new page in Next.js 13's app directory, open our app folder, and in our app folder, we'll create a new folder called About.
[0:09] Inside our About folder, we'll create a new file called page.js. We'll scaffold our page with export default async function about. Inside that, we want to return our page container. Inside our page container, we use our main component and place a title that says, "About this."
[0:36] We didn't import our component. At the top of our file, I will paste imports for our page container, main, title, and description components. Below our title, I'll add a description component. Inside that, it says, "Some info about us," and save. If we go to our browser, and change routes to localhost:3000/about, we should see our new about page.
[1:12] That is how you create a new page in Next.js 13 using the app directory.
Question: any idea about revamping the client app and basing it on typescript instead of javascript?
One little problem folks might want to watch out for is that while the Next.js automatic inclusion of import statements is wonderful, it might make a mistake with "Main"; in my case, I didn't realize that Main component was set to be imported from "next/document" which led to errors. When I changed that line to "import Main from "@/components/Main" as in the video, everything was ok :)