You may need to add and modify some files to properly set up libraries with your Next.js project. What we call plugin is a directory with all the packages you need to install and the files you need to add and modify.
This article will show you how to create a superplate plugin from scratch and the ways superplate offers you to interact with other plugins in your source.
Let's create a plugin to add styled-components to our project easily.
Let's start with creating a directory for our plugin inside our source's
We need to add our plugin to appropriate place in
prompt.js file. We can ask the user for a styling and place
styled-components inside it.
value property for the choice is the same with the directory name you've created.
Let's create a
package.json inside the plugin directory. We need to add
styled-components package and the
babel-plugin-styled-components to properly support SSR.
package.json with User Answers#
Let's say that we want to prompt the users, asking them if they want to include the support for SSR.
We can do so by simply modifying our
prompt.js. Append below codes to your prompts array.
And if this prompt is not answered Yes we want to remove the babel plugin from
devDependencies. We can do that by creating a
package.js inside our plugin.
We will be handling this plugin later in Custom
We have handled the dependencies for our plugin. Now, let's add an example component. First, we need two files
example.tsx. We will place them under
We can use EJS in our files. superplate will process all ejs templates while creating a project. If you want to learn more about the available template data; please check out References#templates
App and the
styled-components has full support for theming. In order to use themes in our entire app; we need to modify Next.js's App component. superplate's base template allows you to modify
Document; to wrap styled-component's
ThemeProvider we need to create an
superplate will merge all
extend.js content and pass it to your templates. You only need to cover modifications for your plugin in plugin's
Since we try to add SSR support. We also need to modify the custom
Document. Let's add the necessary lines for
_document.tsx and only apply them if we select ssr support.
We're done for
_document but in many plugins you may need different template data for each plugin. You can define and return custom data to your templates for every plugin. We used
testSetup property to handle wrappers in superplate's core plugins
enzyme. These custom properties will be merged as well as
_document. Here's an example for custom template data.
We will not cover
enzyme plugins in this article but if you wish to learn more about them; you can check out superplate-core-plugins/react-library.
superplate will take care of your plugin's
tsconfig.json file just like your
package.json and it will merge every custom config you define when you create a new project. We've created an example component with styled-components. Let's add a path alias for our
components directory in our
We will need a babel plugin to ensure consistency between the server and the client. Let's create a
.babelrc file in our plugin to tell babel to use this plugin. superplate will merge all babel config to one just like
meta.json to collect data about plugins. You can provide an url to the docs and a description for your plugin in
meta.json. Here's what we will use for
We've created a plugin from scratch to add
styled-components to our next project with superplate. If you want to check out how we created different plugins, please check out superplate-core-plugins. To learn more about superplate's API, you can check out References.