Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deptno/typescript-monorepo-next-example
TypeScript@3 monorepo example next.js version
https://github.com/deptno/typescript-monorepo-next-example
example monorepo monorepo-example next nextjs typescript typescript-monorepo typescript-monorepo-example typescript-monorepo-next typescript-monorepo-nextjs workspace
Last synced: about 2 months ago
JSON representation
TypeScript@3 monorepo example next.js version
- Host: GitHub
- URL: https://github.com/deptno/typescript-monorepo-next-example
- Owner: deptno
- Created: 2018-08-15T06:19:20.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-15T06:19:32.000Z (about 6 years ago)
- Last Synced: 2024-07-16T07:39:50.840Z (2 months ago)
- Topics: example, monorepo, monorepo-example, next, nextjs, typescript, typescript-monorepo, typescript-monorepo-example, typescript-monorepo-next, typescript-monorepo-nextjs, workspace
- Language: TypeScript
- Homepage:
- Size: 49.8 KB
- Stars: 44
- Watchers: 5
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-nextjs - Typescript Monorepo Next Example - A minimalistic next.js + typescript monorepo. (Boilerplates)
README
# typescript-monorepo-next-example
> 🙉🙉 TypeScript Monorepo Sample
Required TypeScript@3 above
## Create monorepo with next.js
### Prerequisition
`yarn`
### Create monorepo
```bash
$ mkdir typescript-monorepo && cd $_
$ yarn init -y -p
```
- edit [package.json](package.json#L7-L14) # setup workspace and scripts
```bash
$ 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](packages/app/next.config.js)
- edit [packages/app/.babelrc.js](packages/app/.babelrc.js)
- edit [packages/app/tsconfig.json](packages/app/tsconfig.json)
- edit packages/app/package.json
- [packages/app/package.json](packages/app/package.json#L6-L8) # add script
- [packages/app/package.json](packages/app/package.json#L16) # add package(component-a) dependency
- edit [packages/app/pages/index.tsx](packages/app/pages/index.tsx) # add default page and load component from package
### Configure typescript monorepo
- create [packages/tsconfig.json](packages/tsconfig.json)
- create [packages/tsconfig.base.json](packages/tsconfig.base.json)
### Create component
```bash
$ 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](packages/component-a/index.tsx) # add default page and load component from package
- edit [packages/component-a/tsconfig.json](packages/component-a/tsconfig.json) # add default page and load component from package
```bash
$ yarn
$ yarn build:packages # or yarn build:packages:watch
$ yarn start
```
### Related
- [typescript-monorepo-cra-example](https://github.com/deptno/typescript-monorepo-cra-example) - CRA(`create-react-app`) version
- [next.js-typescript-starter-kit](https://github.com/deptno/next.js-typescript-starter-kit) - Next.js TypeScript starter kit