Create a Next.js app from scratch with create-next-app

Enable TypeScript support in a Next.js app

Add global styles to a Next.js app

Add CSS-in-JS styles with emotion to a Next.js app

Add static routes to a Next.js app

Create dynamic routes with next.js

Adding absolute imports to Next.js app

Use Static Generation with getStaticProps in Next.js with TypeScript

Use static generation for dynamic blog pages with Next.js

Set up Netlify deployments for a Next.js blog

Add client-side transitions to a Next.js app

Serve static files with Next.js

Use Head tag in Next.js to add metatags to a site

Add a Netlify Form to a site to gather user's feedback

Change a site name in Netlify

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

Next.js supports a large number of ways to style our app - in this quick lesson we're going to learn how to use [emotion](https://emotion.sh/docs/introduction) to add styles to our components.

https://app.egghead.io/api/v1/lessons/next-js-add-css-in-js-styles-with-emotion-to-a-next-js-app/subtitles

Tomasz Łakomy: [0:00] We would like to be able to use CSS in JS styling for elements such as main, this header, and all of the other components that we're going to have on our site. In order to do that, we are going to use emotion.

[0:11] First up, open up the terminal, and I'm going to install @emotion/core and @emotion/styled. Next up, we're going to import styled from "@emotion/styled". For the record, there are multiple ways of styling components with emotion. I just happen to personally prefer a styled component.

[0:29] Let me start by creating a bunch of site components. I'm going to create a Container, which is going to be a styled.div. Is going to be empty for now. Next up, I'm going to create a Main, which is going to be a styled.main, and also a BlogTitle, which is going to be a styled.h1.

[0:45] With all of that in place, let me replace this div with a container. I have to scroll down over here and change it here as well. Next up, I'm going to use this main instead of this one. I'm going to use the BlogTitle instead of this h1. Let me grab all those styles that we had before.

[1:01] I'm going to copy those for the Container. I'm going to get those styles for Main, and I'm going to get those styles for the title. Let me add some spacing, and I'm going to delete all of those styles. Let me select this entire style tag and hit Delete.

[1:17] Now, our site is styled with CSS in JS with emotion. For instance, if I were to change this BlogTitle to have a color: red and a text-align: center, after I save the file, this change is going to be applied immediately.

Add CSS-in-JS styles with emotion to a Next.js app

Share this video with your friends

Course

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify