{"id":13795033,"url":"https://github.com/dlehmhus/next-with-linaria","last_synced_at":"2025-08-22T08:14:08.854Z","repository":{"id":63010324,"uuid":"563058870","full_name":"dlehmhus/next-with-linaria","owner":"dlehmhus","description":"Linaria loader for Next.js","archived":false,"fork":false,"pushed_at":"2025-06-13T13:49:46.000Z","size":587,"stargazers_count":127,"open_issues_count":7,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-17T03:51:48.370Z","etag":null,"topics":["css","linaria","loader","nextjs","rspack","turbopack","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dlehmhus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-07T20:26:20.000Z","updated_at":"2025-07-21T01:24:33.000Z","dependencies_parsed_at":"2024-06-18T21:32:17.422Z","dependency_job_id":"a9033935-a967-4719-b6f9-8572320079a9","html_url":"https://github.com/dlehmhus/next-with-linaria","commit_stats":{"total_commits":22,"total_committers":2,"mean_commits":11.0,"dds":"0.36363636363636365","last_synced_commit":"cae4616a025a5e9fb1e64a935a340dceb79d6ae6"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/dlehmhus/next-with-linaria","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlehmhus%2Fnext-with-linaria","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlehmhus%2Fnext-with-linaria/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlehmhus%2Fnext-with-linaria/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlehmhus%2Fnext-with-linaria/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dlehmhus","download_url":"https://codeload.github.com/dlehmhus/next-with-linaria/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dlehmhus%2Fnext-with-linaria/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271606595,"owners_count":24788979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","linaria","loader","nextjs","rspack","turbopack","webpack"],"created_at":"2024-08-03T23:00:51.438Z","updated_at":"2025-08-22T08:14:08.817Z","avatar_url":"https://github.com/dlehmhus.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Next.js + Linaria\n\n## What is this?\n\nThis package provides seamless integration between Next.js and Linaria, a zero-runtime CSS-in-JS solution. It allows you to use Linaria's powerful styling capabilities directly in your Next.js applications, with full support for both the App Router and Pages Router.\n\n## Try it\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/next-with-linaria?file=app%2Fpage.tsx)\n\n## Installation\n\n\u003cdetails open\u003e\u003csummary\u003enpm\u003c/summary\u003e\n\n```sh\n    npm install next-with-linaria @wyw-in-js/babel-preset @linaria/core @linaria/react\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003epnpm\u003c/summary\u003e\n\n```sh\n    pnpm install next-with-linaria @wyw-in-js/babel-preset @linaria/core @linaria/react\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003eyarn\u003c/summary\u003e\n\n```sh\n    yarn add next-with-linaria @wyw-in-js/babel-preset @linaria/core @linaria/react\n```\n\n\u003c/details\u003e\n\n## Usage\n\n### Webpack / Turbopack\n\n```ts\n// next.config.ts\nimport withLinaria, { LinariaConfig } from 'next-with-linaria';\n\nconst config: LinariaConfig = {\n  // ...your next.js config\n  linaria: {\n    // Linaria options\n  },\n};\n\nexport default withLinaria(config);\n```\n\n### Rspack\n\nTo use Rspack instead of Webpack, you can combine this package with `next-rspack`:\n\n```ts\n// next.config.ts\nimport withRspack from 'next-rspack';\nimport withLinaria, { LinariaConfig } from 'next-with-linaria';\n\nconst config: LinariaConfig = {\n  // ...your next.js config\n  linaria: {\n    // Linaria options\n  },\n};\n\nexport default withRspack(withLinaria(config));\n```\n\nNow you can use linaria in all the places where Next.js also allows you to use [CSS Modules](https://beta.nextjs.org/docs/styling/css-modules). That currently means in every file in the `app` directory and the `pages` directory.\n\n## Performance Optimization\n\nThe `fastCheck` option is enabled by default to improve build performance. This optimization skips the Linaria transform process for files that don't contain Linaria syntax, which can reduce build times for large projects.\n\nIf you experience any issues with the optimization, you can disable it:\n\n```js\n// next.config.js\nconst withLinaria = require('next-with-linaria');\n\n/** @type {import('next-with-linaria').LinariaConfig} */\nconst config = {\n  // ...your next.js config\n  linaria: {\n    // Disable performance optimization if needed\n    fastCheck: false,\n  },\n};\nmodule.exports = withLinaria(config);\n```\n\n## Restrictions\n\n### Global Styles\n\nIf you want to use linaria for [global styling](https://beta.nextjs.org/docs/styling/global-styles), you need to place those styles into a file with the suffix `.linaria.global.(js|jsx|ts|tsx)`:\n\n```tsx\n// app/style.linaria.global.tsx\nimport { css } from '@linaria/core';\n\nexport const globals = css`\n  :global() {\n    html {\n      box-sizing: border-box;\n    }\n\n    *,\n    *:before,\n    *:after {\n      box-sizing: inherit;\n    }\n\n    @font-face {\n      font-family: 'MaterialIcons';\n      src: url(../assets/fonts/MaterialIcons.ttf) format('truetype');\n    }\n  }\n`;\n```\n\n```tsx\n// app/layout.tsx\nimport './style.linaria.global';\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e{children}\u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\nThis convention is needed because the loader needs to know which files contain global styles and which don't.\n\n## Limitations\n\n- In Webpack and Rspack you can not use linaria styles in server-only files or in server components that import server-only files due to the way HMR works in dev mode.\n\n```tsx\n// app/components/ServerOnlyComponent.tsx\nimport 'server-only';\nimport { styled } from '@linaria/react';\n\nconst Container = styled.div`\n  color: red;\n`;\n\nexport default function ServerOnlyComponent() {\n  return \u003cContainer\u003eHello World\u003c/Container\u003e;\n}\n```\n\nIn such a case you need to use the following approach:\n\n```tsx\n// app/components/Container.tsx\nimport { styled } from '@linaria/react';\nexport const Container = styled.div`\n  color: red;\n`;\n\n// app/components/ServerOnlyComponent.tsx\nimport 'server-only';\nimport { Container } from './Container';\n\nexport default function ServerOnlyComponent() {\n  return \u003cContainer\u003eHello World\u003c/Container\u003e;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdlehmhus%2Fnext-with-linaria","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdlehmhus%2Fnext-with-linaria","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdlehmhus%2Fnext-with-linaria/lists"}