deptno / typescript-monorepo-next-example

TypeScript@3 monorepo example next.js version

typescript-monorepo-next-example

🙉🙉 TypeScript Monorepo Sample
Required TypeScript@3 above

Create monorepo with next.js

Prerequisition

yarn

Create monorepo

$ mkdir typescript-monorepo && cd $_
$ yarn init -y -p

• edit package.json # setup workspace and scripts

$ mkdir -p packages/app && cd $_
$ yarn init -y
$ yarn add -D typescript @types/react
$ yarn add next react react-dom @zeit/next-typescript
$ mkdir pages
$ touch pages/index.tsx next.config.js .babelrc.js tsconfig.json
$ cd ../.. # change root directory

• edit packages/app/next.config.js
• edit packages/app/.babelrc.js
• edit packages/app/tsconfig.json
• edit packages/app/package.json
  • packages/app/package.json # add script
  • packages/app/package.json # add package(component-a) dependency
• edit packages/app/pages/index.tsx # add default page and load component from package

Configure typescript monorepo

• create packages/tsconfig.json
• create packages/tsconfig.base.json

Create component

$ mkdir -p packages/component-a && cd $_
$ yarn init -y
$ yarn add -D typescript @types/react
$ yarn add react
$ touch index.tsx tsconfig.json
$ cd ../.. # change root directory

• edit packages/component-a/index.tsx # add default page and load component from package
• edit packages/component-a/tsconfig.json # add default page and load component from package

$ yarn
$ yarn build:packages # or yarn build:packages:watch
$ yarn start

Related

• typescript-monorepo-cra-example - CRA(create-react-app) version
• next.js-typescript-starter-kit - Next.js TypeScript starter kit

typescript-monorepo-next-example's Issues

[Question] Do not transpile `component-a`

Hey there!

Thank you so much for this example! 👏 I have a question regarding the compilation of the component-a package. I would like to not commit the compiled JS output into the repo. Is it possible to use the TS files directly?

I updated next to v7 and removed the compiled files (.js, ...), but I get the following error:

../component-a/index.tsx 3:23
Module parse failed: Unexpected token (3:23)
You may need an appropriate loader to handle this file type.
| import * as React from 'react'
| 
> export const ComponentA: React.SFC<{}> = props =>
|   <div>ComponentA</div>
|

Is it possible to configure babel/webpack such that the TS files are compiled on the fly?