BurnFM - recoded

Project structure

All source code can be found within src/app.

App Routing

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.tsx file represents a page on the website.

• For example: app/page.tsx defines burnfm.com, and app/about/page.tsx defines burnfm.com/about.

• layout.tsx files define shared UI which can be inherited by children pages a similar concept to templates).

• For example: app/layout.tsx defines the overall layout of the app (navbar at top, content below).

See Next.js - App Routing for information about this concept and its application.

Further files

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. fetchdata.ts)

• app/contexts/ contains React contexts which can be used to share data with children components easily. (e.g. AudioContext.tsx)

Editing the project and viewing changes

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Then open http://localhost:3000 with your browser to see the website running locally.

Deploying to static HTML/CSS/JS

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 build

This 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.

Learn More

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.