- Install NodeJS. Check
.nvmrcfor the version used by this project. - Run
npm installin the project root to install the necessary dependencies. - If using VSCode, install the reccomended extensions.
- Run
npm run devto start NextJS dev server. - Browse to
http://localhost:3000to view the site.
Note
Learn more about NextJS App Router here.
- Go to
src/appand create a new directory for the page.- For example, if you want to create a page at
scstem.org/hello-world, you'd create a folder namedhello-worldin thesrc/appdirectory.
- For example, if you want to create a page at
- Add
page.tsxto your new directory with the following code (suggested: ReplacePageNamewith the name of your page):- Note: Anything returned from your page's default function is wrapped by
src/app/layout.tsx. That file adds things like the navigation bar, footer, etc.
- Note: Anything returned from your page's default function is wrapped by
export const metadata: Metadata = {
title: "My New Page",
description:
"This is my new page",
// ... other metadata fields
};
export default function PageName(): ReactNode {
return <div>Hello World!</div>;
}