File Structure

Most of the code we will be looking at is written in what is called TSX (Typescript XML). It is basically typescript + html. You should be familiar with the basics of react.

If we look within the app directory - this contains all the code that defines all the routes within our website. For nextJS, routes are defined by the folder structure. If a folder has brackets around it - then it is ignored as part of a route.

So, for example, a nextJS website with the route:

https://www.enaccessmaps.com/about

will have files to do with that route in the about folder. In each folder where a page will load, there will be a page.tsx file. This page.tsx file uniquely defines how NextJS will load the html/css/js of the page associated with that route.

An excerpt of src/app/(app)/about

import { notFound } from 'next/navigation';
import { client } from '@/sanity/lib/client';
import { aboutPageQuery } from '@/sanity/lib/aboutQueries';
import AboutPage from '@/components/blocks/aboutPage';
import { draftMode } from 'next/headers';
import { Metadata } from 'next';

...

export default async function AboutUsPage() {
  ...

  // Render About page with our custom component
  return <AboutPage pageData={page} />;
}

As you can see the exported function returns the HTML/CSS/JS of the about page

If you need to brush up on React concepts, please revisit tic-tac-toe.

• React Tic-Tac-Toe Tutorial

Furthermore, I have just gone over a brief overview. Please read the documentation on nextJS routing and how it works. We use the app router

• Next.js Layouts and Pages