Skip to content

Commit d2c6a95

Browse files
jpedroschmitzjpedroschmitz
committed
refactor: sync project with next.js default template
1 parent 7020dcd commit d2c6a95

File tree

8 files changed

+217
-227
lines changed

8 files changed

+217
-227
lines changed

‎public/vercel.svg

+4
Loading

‎public/zeit.svg

-10
This file was deleted.

‎src/components/Title.tsx

-32
This file was deleted.

‎src/pages/_app.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import '@/styles/global.css';
2+
3+
export default function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />;
5+
}

‎src/pages/api/hello.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { NextApiRequest, NextApiResponse } from 'next';
2+
3+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
4+
export default (req: NextApiRequest, res: NextApiResponse) => {
5+
res.statusCode = 200;
6+
res.json({ name: `John Doe` });
7+
};

‎src/pages/index.tsx

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

0 commit comments

Comments
 (0)