Socket
Socket
Sign inDemoInstall

@explodingcamera/next-plugin-styled-components

Package Overview
Dependencies
1
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @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.


Version published
Weekly downloads
2
Maintainers
1
Created
Weekly downloads
 

Changelog

Source

10.0.9 (2021-03-17)

Note: Version bump only for package @explodingcamera/next-plugin-styled-components-root

Readme

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 VersionNext.JS Version
1.2.x9.2.x
1.3.x9.3.x & 9.4.x
2.0.x9.5.x
2.0.x10.0.0
2.1.x10.0.1
10.0.210.0.2
10.0.310.0.3

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

Installation

  1. Install the package $ npm install @explodingcamera/next-plugin-styled-components styled-components

  2. 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

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc