@explodingcamera/next-plugin-styled-components

`@explodingcamera/next-plugin-styled-components` makes it possible to use `styled-components` in next.js without any special configuration, HMR included.

10.0.9
latest
Source
npm

Version published: 4 years ago

Maintainers: 1

Created: 5 years ago

Source

@explodingcamera/next-plugin-styled-components

@explodingcamera/next-plugin-styled-components makes it possible to use styled-components in next.js without any special configuration, HMR included.

Compatibility Matrix

Package Version	Next.JS Version
`1.2.x`	`9.2.x`
`1.3.x`	`9.3.x` & `9.4.x`
`2.0.x`	`9.5.x`
`2.0.x`	`10.0.0`
`2.1.x`	`10.0.1`
`10.0.2`	`10.0.2`
`10.0.3`	`10.0.3`

All later versions follow next.js's versioning, so eg. 10.0.2 is compatible with nextjs >= 10.0.2

Installation

Install the package $ npm install @explodingcamera/next-plugin-styled-components styled-components
Enable the plugin in your next.config.js next.config.js
```
const nextPluginSC = require("@explodingcamera/next-plugin-styled-components");

module.exports = nextPluginSC({
  // your next.js config
});
```

Theres also an example available.

Caveats

Custom `_document.js`

If you are using a custom _document.js, you will need to include a small snipped in you render function (full example:

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>{this.props.headTags}</Head> {/* this line needs to be added */}
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Compatibility

This package is based on experimental next.js features, so it might stop working unexpectedly on newer next.js versions. Please report any issues here.

While next.js doesn't recommend to already create plugins, I created this because this project's scope isn't that large & I use it in production for multiple projects and thus will update it to work with new next.js versions.

When using Yarn Workspaces, Lerna or similar, make sure next.js and this plugin are in the same node_modules directory by using the nohoist option or the equivalent in said tool.

FAQs

What is @explodingcamera/next-plugin-styled-components?

Is @explodingcamera/next-plugin-styled-components well maintained?

Package last updated on 17 Mar 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install