tinhte-api-nextjs v2.0.3

tinhte-api-nextjs

Overview

next.js wrapper for tinhte-api

This library export 2 higher-order components: InitialDataProvider and withInitialData

Usage

Use InitialDataProvider at Nextjs's page components (root):

That is, top-level component of Nextjs's special pages folder.

eg: my-project/pages/about.js

import { apiFactory } from 'tinhte-api';
import { InitialDataProvider } from 'tinhte-api-nextjs';

const api = apiFactory({ ... });
const About = () => <div>...</div>;

export default InitialDataProvider(About, { api });

Use withInitialData at child components that need initial data:

Required params: key, uri and normalize (more descriptions are coming).

eg: my-project/components/header/user.js

import { withInitialData } from 'tinhte-api-nextjs';

const User = ({ initialData }) => {
  // 'initialData' can be used here
  return <div>...</div>;
};

export default withInitialData(User, {
  const key = 'user', // must be unique
  const uri = '/user/me',
  const normalize = data => ...,
});