Next.js Library

Next.js Library aims to provide a set of configs, queries and states for your Next.js project. The file structure follows Atomic Design because we're not designing pages, we're designing components. The goal is to not be restricted in the technologies used by offering a full modularity. Think of it like some of the Next.js official examples, available as HOCs through this package.

This package is a work in progress.

Code of conduct for contributions will follow. Many thanks to RAN for the inspiration.

NPM

next-library

Table of contents

• Configs
  • initData
  • initRedux
  • initApollo
• States
• Todo

Configs

initData

The default initData uses Apollo and Redux. initDataRelay will be available when possible. Open to suggestions for additionnal initial data HOCs.

Situation : automatic initData, initApollo and initRedux.

⚒ Simple Solution : With the official Next.js example In pages/index.js replace withData by initData from this library.

import { initData } from 'next-library'
import App from '../components/App'
import Header from '../components/Header'
import Submit from '../components/Submit'
import PostList from '../components/PostList'

export default initData((props) => (
  <App>
    <Header pathname={props.url.pathname} />
    <Submit />
    <PostList />
  </App>
))

⚓ Custom Solution :

Or pass customReducers to initData. initData takes two arguments; Component and customReducers object. In customReducers object, add as many reducers as you want.

Using the apollo: key will override the default apollo client. Using the auth: key will override the default auth reducer.

import App from '../components/App'
import Header from '../components/Header'
import Submit from '../components/Submit'
import PostList from '../components/PostList'
import {initData, Test} from 'next-library'
import myReducer from 'somewhere'

const Home = (props) => (
  <App>
    <Header pathname={props.url.pathname} />
    <Submit />
    <PostList />
    <Test />
  </App>
)

const customReducers = {
  myReducerKey: myReducer
}

export default initData(Home, customReducers);

Your benefit : Voilà, Now all your apps using this will have this initData up-to-date through this package (feel free to contribute).

Note : initData is a customized version of withData from the with-apollo-and-redux next.js official example.

initRedux

Situation : custom initData automatic initRedux.

Solution : With the official Next.js example In lib/withData.js replace

import initRedux from './initRedux'

with

import {initRedux} from 'next-library'

Your benefit : Now all your apps using this will have this initRedux up-to-date through this package (feel free to contribute).

Note : initRedux is a customized version of initRedux from the with-apollo-and-redux next.js official example. It contains additional token authentication matters.

initApollo

Situation : custom initData automatic initApollo

Solution : With the official Next.js example In lib/withData.js replace

import initApollo from './initApollo'

with

import {initApollo} from 'next-library'

Your benefit : Now all your apps using this will have this initApollo up-to-date through this package (feel free to contribute).

Note : initApollo is a customized version of initApollo from the with-apollo-and-redux next.js official example. It contains additional token authentication matters and dispatchers.

States

WIP

Todo

• Make initData available
• Make initRedux available
• Make initApollo available
• Add ESLint rules
• States check each HOC
• Queries folder add GraphQL
• Add Todo's (hah)