• @zeit/next-mdx
• @zeit/next-css
• @zeit/next-sass
• @zeit/next-less
• @zeit/next-stylus
• @zeit/next-preact
• @zeit/next-typescript
• @zeit/next-bundle-analyzer
• @zeit/next-source-maps

• next-awesome-typescript
• next-compose-plugins
• next-images
• next-inferno
• next-offline
• next-optimized-images
• next-pino
• next-plugin-graphql
• next-testcafe-build
• next-runtime-dotenv
• next-progressbar

⚠️ Before adding a plugin in this repository please create an issue to establish if it should be an official plugin or not.

1. Create a directory under the packages folder
2. Add package.json to the directory with these contents:

{
  "name": "@zeit/next-<NAME>",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "repository": "zeit/next-plugins"
}

3. Add a index.js file with the plugin code
4. Add a readme.md explaining what the plugin does, how to install, and how to configure it
5. Submit a pull request

Probably you are going to use multiple plugins for your project such as Typescript with CSS. In this example using official next-typescript with next-css. :warning: some official and community plugins may not compose such as this example. some plugins have different input arguments and structure. so If It is not working like this example, please check each repos source code.

// At next.config.js file
const withTypescript = require("@zeit/next-typescript");
const withCSS = require('@zeit/next-css')

module.exports = withTypescript(withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
  },
  typescriptLoaderOptions: {
    transpileOnly: false
  }
}));