add nextjs and css-in-js

radar/2021-01-01/css-in-js.md

@@ -0,0 +1,44 @@
+---
+title: "CSS-in-JS"
+ring: trial
+quadrant: methods-and-patterns
+---
+
+CSS-in-JS is a method where JavaScript is used to style components. The first libraries which implemented these technique where [Styled-Components](https://styled-components.com/), [Emotion](https://emotion.sh/) & [JSS](https://cssinjs.org/).
+
+### Example:
+
+```js
+const Button = styled.button`
+  display: inline-block;
+  padding: 0.5rem 0;
+  background: transparent;
+  color: white;
+  border: 2px solid white;
+
+  ${(props) =>
+    props.primary &&
+    css`
+      background: white;
+      color: black;
+    `}
+`;
+
+return <Button primary>Click me</Button>;
+```
+
+Advantages of CSS-in-JS
+
+- Local Scoping instad of global namespace
+- No classname to element mapping
+- Use the full power of JavaScript to enhance CSS (loops, variables & more)
+- Dynamic syling & Theming (Access to state or props)
+- TypeScript Support
+
+Disadvantages of CSS-in-JS
+
+- Runtime cost when using dynamic styling
+- Slightly different syntax than traditional CSS (object syntax vs template literals)
+- Can add an extra layer of complexity
+
+In the meantime CSS-in-JS has evolved even more. The are some libraries which leverages nearly zero-runtime costs such as [Stiches](https://stitches.dev/) or [Vanilla Extract](https://vanilla-extract.style/) while still providing an excellence developer experience with TypeScript.

radar/2021-01-01/next-js.md

@@ -3,3 +3,7 @@ title:      "Next.js"
 ring: adopt
 quadrant: languages-and-frameworks
 ---
+
+[Next.js](https://nextjs.org/) claims itself as **the** React framework for production. It comes with first-class developer experience and many features for example: hybrid static & server-side rendering, TypeScript support, image optimization, code splitting & much more.
+
+We at AOE are already using Next.js for some big projects. The main reason for that is the modern stack (React with TypeScript) and the possibility to render on the server (static prerendering or dynamic SSR) to be able to get crawled by search engines and stay SEO relevant.