Project thoughts

Questions

test

Supported browsers

SWR

How to structure SWR...

import useSWR from 'swr'

import { getUser } from '@lib/authenticate'
import { API_USER } from '@lib/api-endpoints'

export default function useUser() {
  const swr = useSWR(API_USER, () => getUser())

  useEffect(() => {
    if (swr.data && !swr.data.user && redirect) {
      // redirect to login
      Router.replace(
        `/login`
      )
    }
  }, [swr.data])

  swr.isLoggedOut = swr.data && !swr.data.user
  swr.user = swr.data?.user

  return swr
}

Rules for a lightning fast app - the goal is to follow the same rules as Vercel Dashboard

Uses https://github.com/zeit/swr to ensure data is up-to-date while staying fast
All pages are auto-exported to static HTML, no getInitialProps on any pages
All pages implement a loading shell, an example of this is: https://vercel.com/dashboard/abcdefgh
When a user opens the page a fetch is done against the API, if you're logged in they have a cookie set already, if not you're redirected to the login screen

see vercel/next.js#10724 for more info

Supported Browsers

Latest versions of Chrome, Safari, Firefox and Edge on all devices

Acceptable backend response time for basic CRUD operations

350 ms

This frontend does not handle issues caused by response times higher than this

PWA

// TODO

Mock servers

Frontend https://miragejs.com/

// TODO Backend (used only for SSR) MWS https://mswjs.io/

Component library

https://material-ui.com/

SEO optimization

// TODO Mastering nextjs course

Styleguide Driven Development tool

https://storybook.js.org/

sandbox folder

A sandbox where anything can live, please do delete stale files & folders

Presentational components

Presentational components should be developed using storybook, not Nextjs.

Presentational components:

never handle the loading of any data
are pure functional components.
Use useState for simple state
Use useReducer for complex state
exposes the minimum number of props possible
must not use SWR for any reason

src File/Folder structure

constants

global constants and enums live here

hooks

global utility hooks live here

mutations

SWR create, opdate and delete operations live here

pages

browser routes live here
except for _app.tsx and _document.tsx, page files should simply load views and be as minimal as possible
see https://nextjs.org/docs/basic-features/pages

pages/api

api routes live here
https://nextjs.org/docs/api-routes/introduction

presentational/elements

the smallest components that can live on it's own
Can import materials but not other elements

presentational/blocks

Blocks can contain multiple elements or other blocks

presentational/foundation

colors, typography, grid, spacers, presentational config files etc live here

presentational/prototypes

View prototypes without logic live here

providers

globally scoped provider context hooks & components live here
less is better, ideally scope context hooks & components to the view

queries

SWR read operations live here

utils

global utility functions live here

views

view scoped context hooks & components live here

haluvibe/nextjs-starter