/showcase-ssr

SSR version of showcase website using Next.js

Primary LanguageTypeScript

Demo:

https://showcase-ssr.appspot.com/

Hosted on GAE

Available Scripts

In the project directory, you can run:

yarn dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

yarn test

Launches the test runner.

yarn build

Builds the app for production to the ./next folder.

yarn start

Starts the next js server.

Project Structure

Pages

Pages are special components which are rendered for specific routes, they shouldn't contain any styles they should only contain other components

Pages also act as the containers because of the way that next.js works. For SSR to have the data before a page loads it will run a function to grab and inject the data into the page, this data will either get sent to a context store of ripple out to the components via props

Components

Components are the main building blocks of the this application. Ideally each component should live in its own folder and contain an index file. This folder should also contain a styles file where styles have been separated out. Each component should contain its on tests folder for testing different states and snapshots for regression testing.

Contexts

Contexts are where shared state is stored

Hooks

Reusable behaviors, such as listening to dom events and returning values or, URL requests and returning values.

Utils

General methods can be used across all other files.

Theme

In order to use standardized colours fonts and spacing, no magic numbers should be used in styles all value should derive from the theme as much as possible

URLs

When creating links and route all urls are stored in an object here.