This is just a fun stack with combinations of Next.js, Elysia.js, Bun, Tailwind, Drizzle, etc.
- N: Next.js
- E: Elysia.js
- R: React.js
- D: Drizzle
This term is just a fun name that I added. You can name it whatever you want.
Run the following command:
npm create turbo@latest -e https://github.com/binamralamsal/nerd-stack-auth-sample
This Turborepo includes the following packages/apps:
client
: Next.js app with Tailwind CSSserver
: Elysia.js server with Drizzleui
: a stub React component library with Tailwind CSS shared byclient
@repo/eslint-config
:eslint
configurations (includeseslint-config-next
andeslint-config-prettier
)@repo/typescript-config
:tsconfig.json
s used throughout the monorepo@repo/tailwind-config
: Tailwind configuration used throughoutclient
and@repo/ui
@repo/api
: Eden Treaty client to accessserver
's API throughclient
Each package/app is 100% TypeScript.
This example is set up to produce compiled styles for ui
components into the dist
directory. The component .tsx
files are consumed by the Next.js apps directly using transpilePackages
in next.config.js
. This was chosen for several reasons:
- Make sharing one
tailwind.config.js
to apps and packages as easy as possible. - Make package compilation simple by only depending on the Next.js Compiler and
tailwindcss
. - Ensure Tailwind classes do not overwrite each other. The
ui
package uses aui-
prefix for it's classes. - Maintain clear package export boundaries.
Another option is to consume packages/ui
directly from source without building. If using this option, you will need to update the tailwind.config.js
in your apps to be aware of your package locations, so it can find all usages of the tailwindcss
class names for CSS compilation.
For example, in tailwind.config.js:
content: [
// app content
`src/**/*.{js,ts,jsx,tsx}`,
// include packages if not transpiling
"../../packages/ui/*.{js,ts,jsx,tsx}",
],
If you choose this strategy, you can remove the tailwindcss
and autoprefixer
dependencies from the ui
package.
This Turborepo has some additional tools already setup for you:
- Tailwind CSS for styles
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting