A basic, production-ready boilerplate for Next.js applications using Twin Macro (Tailwind CSS-in-JS), Styled Components, and TypeScript.
- ⚡️ Next.js 15
- 💅 Styled Components
- 🎨 Twin Macro (Tailwind CSS-in-JS)
- 📝 TypeScript
- 🔧 ESLint
- 💖 Prettier
- Node.js 18.17.0 or later
- npm or yarn or pnpm
- Clone the repository:
git clone https://github.com/yourusername/nextjs-twin-macro-boilerplate.git- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
├── app/ # Next.js app directory (App Router)
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
├── public/ # Static files
├── styles/ # Global styles
└── types/ # TypeScript type definitions
This boilerplate uses Next.js 15 with the App Router, which provides:
- Server Components by default
- Simplified data fetching
- Built-in SEO optimizations
- Layout nesting
- Route groups
- Loading and error states
npm run dev- Starts the development servernpm run build- Creates an optimized production buildnpm run start- Starts the production servernpm run lint- Runs ESLint for code linting
This boilerplate uses Twin Macro with Styled Components. Here's a basic example:
import tw, { styled } from "twin.macro";
// Using tw
const StyledDiv = tw.div`flex items-center justify-center min-h-screen`;
// Using styled-components with tw
const Button = styled.button`
${tw`px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600`}
`;Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.