https://github.com/sourcesense/next-toolkit

HOCs and Utilities for zeit/next.js caching and lazy loading
https://github.com/sourcesense/next-toolkit

Last synced: 23 days ago
JSON representation

HOCs and Utilities for zeit/next.js caching and lazy loading

• Host: GitHub
• URL: https://github.com/sourcesense/next-toolkit
• Owner: sourcesense
• License: mit
• Created: 2018-10-24T10:14:00.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-13T14:21:57.000Z (about 6 years ago)
• Last Synced: 2024-04-29T06:42:35.936Z (8 months ago)
• Language: JavaScript
• Size: 115 KB
• Stars: 1
• Watchers: 21
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Toolkit for Next.js

Easy to use universal HOCs and Utilities for [Next.js](https://github.com/zeit/next.js) to manage page loading, [Edge Side Includes](https://en.wikipedia.org/wiki/Edge_Side_Includes) and `getInitialProps`. \

All these components can be used separately or together to create a composable structure.

- Page with Loader on the client side only

- Edge with Loader on the client side only **(not available yet)**

- Edge Side Include **(not available yet)**

- Edge **(not available yet)**

- [ApiConnect utility](./docs/apiConnect.md)

## How to use

Install:

```bash

npm install next-toolkit --save

```

### Page with Loader

In your page file

```javascript

import React from 'react';

import { withLoader } from 'next-toolkit';

export class Page extends React.Component {

  static async getInitialProps(ctx) {

    await new Promise((resolve) => setTimeout(() => resolve(), 3000));

    /** this promise above is only to performe the example */

  }

  render() {

    return 
Hello World!
;

  }

}


const Loader = () => 
Loading
;


export default withLoader(Loader)(Page);

```

This file is used both on server and client side. On the server side the `Loader` component will **never** be rendered.

##### Related links

- [zeit/next.js](https://github.com/zeit/next.js) - Framework for server-rendered React applications