next compose plugins
v2.2.1
next.jsのプラグインを有効にして構成するためのクリーンなAPIを提供します。デフォルトのWay next.jsは、プラグインを有効にして構成することを提案しているため、プラグインが多数あるときに不明確で混乱を招く可能性があります。
多くの場合、どのプラグインが有効になっているか、または1つの構成オブジェクトを共有しているため、どのプラグインがどのプラグインに属しているかは不明です。これにより、プラグインを更新または削除する際に、孤立した構成値につながる可能性があります。
next-compose-plugins各プラグインが独自の構成オブジェクトを持つプラグインを有効にして構成するための代替APIを提供することにより、このケースを排除しようとしますが、フェーズ固有のプラグインや構成などの機能も追加します。
withPlugins npm install --save next-compose-plugins
ダッシュボードまたは管理者UIを構築しますか？それとも、現実世界のプロジェクトでnext-compose-pluginsの使用例を見たいですか？パートナーのクリエイティブティムによるNextJSマテリアルダッシュボードをチェックして、あなたを始めましょう。
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
module . exports = withPlugins ( [ ... plugins ] , nextConfiguration ) ;pluginsより多くのユースケースについては、例を参照してください。
これは、すべてのプラグインとその構成を含む配列です。プラグインが追加の構成が必要ない場合は、インポートされたプラグインを追加するだけです。構成が必要な場合、または特定のフェーズでのみ実行する場合は、配列を指定できます。
[plugin: function, configuration?: object, phases?: array] plugin: functionインポートされたプラグイン。プラグインが実際に使用されているときにのみ必要な場合のみ、オプションのプラグインセクションを参照してください。
const withPlugins = require ( 'next-compose-plugins' ) ;
const sass = require ( '@zeit/next-sass' ) ;
module . exports = withPlugins ( [
[ sass ] ,
] ) ; configuration?: objectプラグインの構成。
また、フェーズの特定の構成キーを上書きすることもできます。
const withPlugins = require ( 'next-compose-plugins' ) ;
const { 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_PRODUCTION_BUILD ] : {
cssLoaderOptions : {
localIdentName : '[hash:base64:8]' ,
} ,
} ,
} ] ,
] ) ;これにより、 cssLoaderOptions指定された新しいlocalIdentNameを使用して上書きされますが、生産ビルド中のみです。また、複数のフェーズ（ [PHASE_PRODUCTION_BUILD + PHASE_PRODUCTION_SERVER]: {} ）を組み合わせることも、Phase（['！' + PRODUCTION_BUILD ['!' + PHASE_PRODUCTION_BUILD]: {}除外することもできます。次のすべてのフェーズを使用できます。JSは提供します。
phases?: arrayプラグインを特定のフェーズでのみ適用する必要がある場合は、ここで指定できます。次のすべてのフェーズを使用できます。JSは提供します。
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 ] ] ,
] ) ;また、リーディングでフェーズを否定することもできます! ：
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_DEVELOPMENT_SERVER除くすべてのフェーズにプラグインが適用されます。
nextConfiguration直接next.js構成は、 {distDir: 'dist'}など、ここに移動できます。
また、このオブジェクト内のnext.jsのWebパック構成をカスタマイズすることもできます。
const withPlugins = require ( 'next-compose-plugins' ) ;
const nextConfig = {
distDir : 'build' ,
webpack : ( config , options ) => {
// modify the `config` here
return config ;
} ,
} ;
module . exports = withPlugins ( [
// add plugins here..
] , nextConfig ) ;フェーズはnextConfigurationオブジェクト内でもサポートされており、プラグインconfigurationと同じ構文を持っています。
const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;
const nextConfig = {
distDir : 'build' ,
[ '!' + PHASE_DEVELOPMENT_SERVER ] : {
assetPrefix : 'https://my.cdn.com' ,
} ,
} ;プラグインが使用されたときにのみロードされる必要がある場合は、 optionalヘルパー機能を使用できます。これは、プラグインがdevDependenciesのみにあるため、すべてのフェーズで利用できない場合がある場合に特に役立ちます。この場合、 optionalヘルパーを使用しないと、エラーが発生します。
const { withPlugins , optional } = require ( 'next-compose-plugins' ) ;
const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;
module . exports = withPlugins ( [
[ optional ( ( ) => require ( '@zeit/next-sass' ) ) , { /* optional configuration */ } , [ PHASE_DEVELOPMENT_SERVER ] ] ,
] ) ;たとえば、1つのリポジトリに1つ以上のnext.jsプロジェクトがある場合など、 next.config.jsファイルを複数のファイルに分割することが理にかなっています。その後、1つのファイルにベース構成を定義し、構成ファイルまたはプロジェクトにプロジェクト固有のプラグイン/設定を追加できます。
これを簡単にアーカイブするには、プロジェクトのnext.config.jsファイルでextendヘルパーを使用できます。
// next.config.js
const { withPlugins , extend } = require ( 'next-compose-plugins' ) ;
const baseConfig = require ( './base.next.config.js' ) ;
const nextConfig = { /* ... */ } ;
module . exports = extend ( baseConfig ) . withPlugins ( [
[ sass , {
cssModules : true ,
} ] ,
] , nextConfig ) ; // base.next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
module . exports = withPlugins ( [
[ typescript , {
typescriptLoaderOptions : {
transpileOnly : false ,
} ,
} ] ,
] ) ; このプラグインには、プラグイン開発者として使用できるいくつかの追加機能があります。ただし、それらを使用する場合は、READMEのどこかに言及するか、すべての機能を利用できるようにnext-compose-plugins必要であることをインストールする必要があります。そのため、このコンポーズプラグインを使用していないため、説明されているように機能していない場合はユーザーを混乱させません。
プラグインが返されるオブジェクト内で実行されるフェーズを指定できます。
const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;
module . exports = ( nextConfig = { } ) => {
return Object . assign ( { } , nextConfig , {
// define in which phases this plugin should get applied.
// you can also use multiple phases or negate them.
// however, users can still overwrite them in their configuration if they really want to.
phases : [ PHASE_DEVELOPMENT_SERVER ] ,
webpack ( config , options ) {
// do something here which only gets applied during development server phase
if ( typeof nextConfig . webpack === 'function' ) {
return nextConfig . webpack ( config , options ) ;
}
return config ;
} ,
} ;
} ;これらのフェーズはデフォルトの構成として処理され、ユーザーは必要に応じてnext.config.jsファイルのフェーズを上書きできます。利用可能なすべてのオプションのフェーズ構成を参照してください。
プラグインがnext-compose-pluginsでロードされると、依存できる追加情報が利用可能です。プラグイン関数の2番目の引数として渡されます。
module . exports = ( nextConfig = { } , nextComposePlugins = { } ) => {
console . log ( nextComposePlugins ) ;
} ;現在、これらの値が含まれています。
{
// this is always true when next-compose-plugins is used
// so you can use this as a check when your plugin depends on it
nextComposePlugins : boolean ,
// the current phase which gets applied
phase : string ,
} パートナーのCreative TimによるNextJSマテリアルダッシュボードをチェックして、Real Worldアプリケーションでnext-compose-pluginsどのように使用されたかを確認してください。
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const images = require ( 'next-images' ) ;
const sass = require ( '@zeit/next-sass' ) ;
const typescript = require ( '@zeit/next-typescript' ) ;
// next.js configuration
const nextConfig = {
useFileSystemPublicRoutes : false ,
distDir : 'build' ,
} ;
module . exports = withPlugins ( [
// add a plugin with specific configuration
[ sass , {
cssModules : true ,
cssLoaderOptions : {
localIdentName : '[local]___[hash:base64:5]' ,
} ,
} ] ,
// add a plugin without a configuration
images ,
// another plugin with a configuration
[ typescript , {
typescriptLoaderOptions : {
transpileOnly : false ,
} ,
} ] ,
] , nextConfig ) ; // next.config.js
const { withPlugins , optional } = require ( 'next-compose-plugins' ) ;
const images = require ( 'next-images' ) ;
const sass = require ( '@zeit/next-sass' ) ;
const typescript = require ( '@zeit/next-typescript' ) ;
const {
PHASE_PRODUCTION_BUILD ,
PHASE_PRODUCTION_SERVER ,
PHASE_DEVELOPMENT_SERVER ,
PHASE_EXPORT ,
} = require ( 'next/constants' ) ;
// next.js configuration
const nextConfig = {
useFileSystemPublicRoutes : false ,
distDir : 'build' ,
} ;
module . exports = withPlugins ( [
// add a plugin with specific configuration
[ sass , {
cssModules : true ,
cssLoaderOptions : {
localIdentName : '[local]___[hash:base64:5]' ,
} ,
[ PHASE_PRODUCTION_BUILD + PHASE_EXPORT ] : {
cssLoaderOptions : {
localIdentName : '[hash:base64:8]' ,
} ,
} ,
} ] ,
// add a plugin without a configuration
images ,
// another plugin with a configuration (applied in all phases except development server)
[ typescript , {
typescriptLoaderOptions : {
transpileOnly : false ,
} ,
} , [ '!' , PHASE_DEVELOPMENT_SERVER ] ] ,
// load and apply a plugin only during development server phase
[ optional ( ( ) => require ( '@some-internal/dev-log' ) ) , [ PHASE_DEVELOPMENT_SERVER ] ] ,
] , nextConfig ) ;比較として、このプラグインがなければこのように見えます。このプラグインは、どの構成がどのプラグインに属し、すべての有効なプラグインとは何かが明確ではありません。上記の多くの機能も不可能であるか、構成ファイルにもっと多くのカスタムコードを持っている必要があります。
// next.config.js
const withSass = require ( '@zeit/next-sass' ) ;
const withTypescript = require ( '@zeit/next-typescript' ) ;
const withImages = require ( 'next-images' ) ;
const withOffline = require ( 'next-offline' ) ;
module . exports = withSass ( withOffline ( withTypescript ( withImages ( {
{
cssModules : true ,
cssLoaderOptions : {
importLoaders : 1 ,
localIdentName : '[local]___[hash:base64:5]' ,
} ,
typescriptLoaderOptions : {
transpileOnly : false ,
} ,
useFileSystemPublicRoutes : false ,
distDir : 'build' ,
workerName : 'sw.js' ,
imageTypes : [ 'jpg' , 'png' ] ,
}
} ) ) ) ) ; next.jsの公式およびコミュニティ製のプラグインのリストについては、Vercel/Next-Pluginsを参照してください。
MIT©Cyril Wanner
