Skip to content

Commit 3e0c9a7

Browse files
atapasatapas
authored
Merge pull request #2 from TryShape/issue-1-add-styled-components
feat: Added the support for styled-components
2 parents c616378 + 39b8a10 commit 3e0c9a7

5 files changed

Lines changed: 279 additions & 214 deletions

File tree

‎.babelrc‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"presets": [
3+
"next/babel"
4+
],
5+
"plugins": [
6+
[
7+
"styled-components",
8+
{
9+
"ssr": true,
10+
"displayName": true,
11+
"preprocess": false
12+
}
13+
]
14+
]
15+
}

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "learn-starter",
2+
"name": "tryshape",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -10,6 +10,10 @@
1010
"dependencies": {
1111
"next": "^10.0.0",
1212
"react": "17.0.1",
13-
"react-dom": "17.0.1"
13+
"react-dom": "17.0.1",
14+
"styled-components": "^5.3.0"
15+
},
16+
"devDependencies": {
17+
"babel-plugin-styled-components": "^1.12.0"
1418
}
1519
}

‎pages/_document.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Document, { Head, Main, NextScript } from 'next/document';
2+
// Import styled components ServerStyleSheet
3+
import { ServerStyleSheet } from 'styled-components';
4+
5+
export default class MyDocument extends Document {
6+
static getInitialProps({ renderPage }) {
7+
// Step 1: Create an instance of ServerStyleSheet
8+
const sheet = new ServerStyleSheet();
9+
10+
// Step 2: Retrieve styles from components in the page
11+
const page = renderPage((App) => (props) =>
12+
sheet.collectStyles(<App {...props} />),
13+
);
14+
15+
// Step 3: Extract the styles as <style> tags
16+
const styleTags = sheet.getStyleElement();
17+
18+
// Step 4: Pass styleTags as a prop
19+
return { ...page, styleTags };
20+
}
21+
22+
render() {
23+
return (
24+
<html>
25+
<Head>
26+
{/* Step 5: Output the styles in the head */}
27+
{this.props.styleTags}
28+
</Head>
29+
<body>
30+
<Main />
31+
<NextScript />
32+
</body>
33+
</html>
34+
);
35+
}
36+
}

‎pages/index.js‎

Lines changed: 9 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,209 +1,11 @@
1-
import Head from 'next/head'
1+
import styled from 'styled-components';
22

3-
export default function Home() {
4-
return (
5-
<div className="container">
6-
<Head>
7-
<title>Create Next App</title>
8-
<link rel="icon" href="/favicon.ico" />
9-
</Head>
3+
export default () => (
4+
<div>
5+
<Title>My First Next.js Page</Title>
6+
</div>
7+
);
108

11-
<main>
12-
<h1 className="title">
13-
Welcome to <a href="https://nextjs.org">Next.js!</a>
14-
</h1>
15-
16-
<p className="description">
17-
Get started by editing <code>pages/index.js</code>
18-
</p>
19-
20-
<div className="grid">
21-
<a href="https://nextjs.org/docs" className="card">
22-
<h3>Documentation &rarr;</h3>
23-
<p>Find in-depth information about Next.js features and API.</p>
24-
</a>
25-
26-
<a href="https://nextjs.org/learn" className="card">
27-
<h3>Learn &rarr;</h3>
28-
<p>Learn about Next.js in an interactive course with quizzes!</p>
29-
</a>
30-
31-
<a
32-
href="https://github.com/vercel/next.js/tree/master/examples"
33-
className="card"
34-
>
35-
<h3>Examples &rarr;</h3>
36-
<p>Discover and deploy boilerplate example Next.js projects.</p>
37-
</a>
38-
39-
<a
40-
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
41-
className="card"
42-
>
43-
<h3>Deploy &rarr;</h3>
44-
<p>
45-
Instantly deploy your Next.js site to a public URL with Vercel.
46-
</p>
47-
</a>
48-
</div>
49-
</main>
50-
51-
<footer>
52-
<a
53-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
54-
target="_blank"
55-
rel="noopener noreferrer"
56-
>
57-
Powered by{' '}
58-
<img src="/vercel.svg" alt="Vercel" className="logo" />
59-
</a>
60-
</footer>
61-
62-
<style jsx>{`
63-
.container {
64-
min-height: 100vh;
65-
padding: 0 0.5rem;
66-
display: flex;
67-
flex-direction: column;
68-
justify-content: center;
69-
align-items: center;
70-
}
71-
72-
main {
73-
padding: 5rem 0;
74-
flex: 1;
75-
display: flex;
76-
flex-direction: column;
77-
justify-content: center;
78-
align-items: center;
79-
}
80-
81-
footer {
82-
width: 100%;
83-
height: 100px;
84-
border-top: 1px solid #eaeaea;
85-
display: flex;
86-
justify-content: center;
87-
align-items: center;
88-
}
89-
90-
footer img {
91-
margin-left: 0.5rem;
92-
}
93-
94-
footer a {
95-
display: flex;
96-
justify-content: center;
97-
align-items: center;
98-
}
99-
100-
a {
101-
color: inherit;
102-
text-decoration: none;
103-
}
104-
105-
.title a {
106-
color: #0070f3;
107-
text-decoration: none;
108-
}
109-
110-
.title a:hover,
111-
.title a:focus,
112-
.title a:active {
113-
text-decoration: underline;
114-
}
115-
116-
.title {
117-
margin: 0;
118-
line-height: 1.15;
119-
font-size: 4rem;
120-
}
121-
122-
.title,
123-
.description {
124-
text-align: center;
125-
}
126-
127-
.description {
128-
line-height: 1.5;
129-
font-size: 1.5rem;
130-
}
131-
132-
code {
133-
background: #fafafa;
134-
border-radius: 5px;
135-
padding: 0.75rem;
136-
font-size: 1.1rem;
137-
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
138-
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
139-
}
140-
141-
.grid {
142-
display: flex;
143-
align-items: center;
144-
justify-content: center;
145-
flex-wrap: wrap;
146-
147-
max-width: 800px;
148-
margin-top: 3rem;
149-
}
150-
151-
.card {
152-
margin: 1rem;
153-
flex-basis: 45%;
154-
padding: 1.5rem;
155-
text-align: left;
156-
color: inherit;
157-
text-decoration: none;
158-
border: 1px solid #eaeaea;
159-
border-radius: 10px;
160-
transition: color 0.15s ease, border-color 0.15s ease;
161-
}
162-
163-
.card:hover,
164-
.card:focus,
165-
.card:active {
166-
color: #0070f3;
167-
border-color: #0070f3;
168-
}
169-
170-
.card h3 {
171-
margin: 0 0 1rem 0;
172-
font-size: 1.5rem;
173-
}
174-
175-
.card p {
176-
margin: 0;
177-
font-size: 1.25rem;
178-
line-height: 1.5;
179-
}
180-
181-
.logo {
182-
height: 1em;
183-
}
184-
185-
@media (max-width: 600px) {
186-
.grid {
187-
width: 100%;
188-
flex-direction: column;
189-
}
190-
}
191-
`}</style>
192-
193-
<style jsx global>{`
194-
html,
195-
body {
196-
padding: 0;
197-
margin: 0;
198-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
199-
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
200-
sans-serif;
201-
}
202-
203-
* {
204-
box-sizing: border-box;
205-
}
206-
`}</style>
207-
</div>
208-
)
209-
}
9+
const Title = styled.h1`
10+
color: #3700ff;
11+
`;

0 commit comments

Comments
 (0)