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.