All source code for the frontend can be found within src. Backend config files and php files can be found in server.
This project uses the new App Router architecture from Next.js. Below is some information about how this project is organised using this router.
-
Each folder containing a
page.tsxfile represents a page on the website. -
For example:
app/page.tsxdefines burnfm.com, andapp/about/page.tsxdefines burnfm.com/about. -
layout.tsxfiles define shared UI which can be inherited by children pages a similar concept to templates). -
For example:
app/layout.tsxdefines the overall layout of the app (navbar at top, content below).
See Next.js - App Routing for information about this concept and its application.
Outside of these two special files, there are more places where code is organised:
-
app/components/contains React components which can be used elsewhere. (e.g. RadioPlayer) -
app/styles/contains stylesheets which can be used within components. (e.g. buttons.module.css) -
app/lib/contains functions which can be called within code elsewhere. (e.g. api.ts) -
app/contexts/contains React contexts which can be used to share data with children components easily. (e.g. AudioContext.tsx)
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devThen open http://localhost:3000 with your browser to see the website running locally.
Once you are happy with your changes, you can run the following command in the terminal (open within the project) to compile everything to static files:
next buildThis will create a out file within the project root. This can be put onto a web server in order to serve the website.
See Next.js - Deploying for more information.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.