Table of Contents
- About The Project
- Built With
- Usage
- Contributing
About the project
This project was designed to make integration of SpiroKit in next apps easier
Next.js is a React framework that provides simple page-based routing as well as server-side rendering. To use Next.js with SpiroKit for web we recommend that you use a library called @spirokit/next-adapter to handle the configuration and integration of the tools.
Built With
- next
- react
- react-dom
- typescript
- tsc
- react-native-web
Usage
-
yarn add @spirokit/next-adapter next-compose-plugins next-transpile-modules next-fonts -D
-
yarn add react-native-web @spirokit/native-base react-native react-native-svg react-native-safe-area-context react-native-heroicons
-
Re-export the custom
Document
component in thepages/_document.js
file of your NextJs project.- This will ensure
react-native-web
styling works. - Wraps all the css in style tag on server side (thus preventing css flicker issue)
- Or you can create the file -
mkdir pages; touch pages/_document.js
pages/_document.js
export { default } from "@spirokit/next-adapter/document";
- This will ensure
-
Update
next.config.json
with below codeCustom withSpiroKit function implements withPlugins function from next-compose-plugins.
WithSpiroKit function takes in 2 parameters :
type withSpiroKitParam = {
config: ConfigType,
phase?: Array,
};
type ConfigType = {
dependencies?: Array<string>,
plugins?: Array<function>,
nextConfig?: Object,
};
1. Config parameter is an object with 3 keys:
- dependencies: List of dependencies which are transpiled using
[next-transpile-modules](https://github.com/martpie/next-transpile-modules)
.
const { withSpiroKit } = require("@spirokit/next-adapter");
module.exports = withSpiroKit({
dependencies: [],
});
- plugins: It is an array containing all plugins and their configuration.
const { withSpiroKit } = require("@spirokit/next-adapter");
const sass = require("@zeit/next-sass");
module.exports = withSpiroKit({
plugins: [[sass]],
});
- nextConfig: Configuration for the plugin. You can also overwrite specific configuration keys for a phase.
const { withSpiroKit } = require("@spirokit/next-adapter");
module.exports = withSpiroKit({
nextConfig: {
projectRoot: __dirname,
webpack: (config, options) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
"react-native$": "react-native-web",
};
config.resolve.extensions = [
".web.js",
".web.ts",
".web.tsx",
...config.resolve.extensions,
];
return config;
},
},
});
2. Phase
If the plugin should only be applied in specific phases, you can specify them here. You can use all phases next.js provides.
const withPlugins = require("next-compose-plugins");
const {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} = require("next/constants");
const sass = require("@zeit/next-sass");
module.exports = withPlugins([
[
sass,
{
cssModules: true,
cssLoaderOptions: {
localIdentName: "[path]___[local]___[hash:base64:5]",
},
},
[PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD],
],
]);