{
  "packages": [
    "apps/*"
  ],
  "version": "1.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}

{
  "name": "otus",
  "version": "1.0.0",
  "workspaces": [
    "apps/*"
  ],
  "private": true,
  "devDependencies": {
    "lerna": "^3.22.1"
  }
}

{
  "name": "@otus/external",
  "version": "1.0.0",
  "private": true
}

module.exports = (opts, args) => {
  return {
    entry: './src/index.jsx',
    output: {
      path: buildPath,
      filename: `js/[name]-[hash].js`,
      publicPath: '/',
    },
    module: {
      rules: [
        {
          test: /\\.jsx?$/,
          exclude: /node_modules/,
          loader: ‘babel-loader’
        },
      ],
    },
    devServer: {
      port: 9002,
      host: 'localhost',
      ...
    },
  };
   ...
  };
};

module.exports = api => {
  api.cache(() => process.env.NODE_ENV);
  return {
    presets: [
      [
        require('@babel/preset-env'),
        {
          targets: {
            browsers: ['> 0.25%, not dead']
          }
        }
      ],
      require('@babel/preset-react'),
    ],
  };
};

{
  "scripts": {
    "dev": "webpack serve --mode development",
   },
   ...
}

{
  "scripts": {
    "dev": "next dev -p 9001"
  }
  ...
}

{
  "scripts": {
    "dev": "lerna run --parallel dev"
  },
  ...
}

{
  test: /\\.(ts|js)x?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

module.exports = api => {
  ...
  return {
    presets: [
      ...
      require('@babel/preset-typescript'),
    ],
  };
};

Корневой конфиг tsconfig.base.json:
{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"],
     ...
  }
}
Конфиг в internal:
{
  "extends": "../../tsconfig.base.json",
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {...},
  "include": [
    "next-env.d.ts",
    ...
  ],
  "exclude": [
    "node_modules"
  ]
}

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    es6: true
  },
  extends: [
    'eslint:recommended',
    'prettier',
    'prettier/react',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './apps/**/tsconfig.json'
  },
  plugins: [...],
  rules: {...},
  settings: {
'import/parsers': {
   '@typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
   "typescript": {
     "project": "tsconfig.json"
   },
},
}
};

const path = require('path');
module.exports = {
  extends: path.resolve('../../.eslintrc.js'),
  ...
};

module.exports = (opts, args) => {
  return {
    ...
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      alias: {
        shared: path.join(appsPath, 'shared/src'),
      }
    },
    ...
  };
};

{
  "compilerOptions": {
    "baseUrl": "apps",
    "paths": {
      "shared/*": ["shared/src/*"],
      "internal/*": ["internal/src/*"],
      "external/*": ["external/src/*"]
    },
    ...
  }
}

import * as React from 'react';
import { render } from 'react-dom';
import Button from 'shared/components/Button'; <--
render(
  <div>
    <Button />
  </div>,
  document.getElementById('root')
);

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "baseUrl": "..",
    "paths": {
      "shared/*": ["shared/src/*"],
      "components/*": ["external/components/*"]
    },
    ...
}

const withPlugins = require("next-compose-plugins");
const withTM = require('next-transpile-modules')(['shared']);
const plugins = [
  [withTM],
];
module.exports = withPlugins(plugins);

module.exports =function(api) {
  api.cache(() => process.env.NODE_ENV);
const presets = ['next/babel'];
const plugins = [
    [
      'babel-plugin-styled-components',
      {
        'ssr':true,
        'displayName':true,
      }
    ]
  ];
return{
    presets,
    plugins
  };
};

const withPlugins= require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['shared']);
const withCustomBabelConfig= require('next-plugin-custom-babel-config');
const path = require('path');
const plugins = [
  [
     withCustomBabelConfig,
    { babelConfigFile: path.resolve('./babel.config.js') },
  ],
   [withTM],
];
module.exports = withPlugins(plugins);

import Document,
{
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentProps,
  Html,
} from 'next/document';
import * as React from 'react';
import { ServerStyleSheet } from 'styled-components';
class MyDocument extends Document<DocumentProps & { styleTags:Array<React.ReactElement> }
> {
static async getInitialProps(ctx: DocumentContext) {
  const initialProps = await Document.getInitialProps(ctx);
  const sheet = new ServerStyleSheet();
  const page = ctx.renderPage((App) => (props) =>
        sheet.collectStyles(<App {...props} />)
      );
  const styleTags = sheet.getStyleElement();
  return { ...initialProps, ...page, styleTags };
  }
  render() {
   return(
      <Html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;