nextjs-guidelines.md

• Introduction
  • Directory Structure
  • Layouts
  • Data Fetching & State Management
    • HOWTOs:
      • HOWTO: SSR + Hookstate.js
      • HOWTO: SSR + Rematch

Introduction

Directory Structure

Use the src directory and follow the React Guidelines - Directory Structure.

Layouts

Dynamically import layouts and render them in the App component as this prevents the layout component to lose its state upon navigation.

Set the desired layout name and properties on object properties of the page component:

// pages/index.tsx

setLayout(HomePage, "SomeLayout", { props: { foo: 'bar' } })

You can then retrieve the layout component and properties in the App component:

// pages/app.tsx

export default function App({ Component, pageProps }: AppProps) {
  const [Layout, layoutProps] = usePageLayout(Component)

  return (
    <Layout {...layoutProps} >
      <Component {...pageProps} />
    </Layout>
  )
}

Data Fetching & State Management

Please read React Guidelines first.

HOWTOs:

HOWTO: SSR + Hookstate.js

TODO.

HOWTO: SSR + Rematch

TODO.