Skip to content

Commit 73b3bff

Browse files
danangekaldanangekal
authored
Merge pull request #17 from danangekal/feature/update-next-13
refactor: update next 13 & other deps with new UI
2 parents 4d58b50 + 97d13f9 commit 73b3bff

File tree

15 files changed

+1531
-823
lines changed

15 files changed

+1531
-823
lines changed

‎README.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ You can check [demo](https://next-typescript-starter-demo.vercel.app/)
77
## Features
88

99
- [React.js 18](https://reactjs.org/blog/2022/03/29/react-v18.html) - Blog introduce react v18.0.
10-
- [Next.js 12](https://nextjs.org/blog/next-12) - Blog introduce next.js 12.
11-
- [Typescript 4](https://www.typescriptlang.org/) - Documentation of typescript.
10+
- [Next.js 13](https://nextjs.org/blog/next-13) - Blog introduce next.js 13.
11+
- [Typescript 5](https://www.typescriptlang.org/) - Documentation of typescript.
1212
- [Docker](https://docs.docker.com/) - Documentation of docker.
1313
- [Eslint 8](https://eslint.org/docs/user-guide/getting-started) - Documentation of eslint.
14-
- [Prettier 2](https://prettier.io/docs/en/index.html) - Documentation of prettier.
14+
- [Prettier 3](https://prettier.io/docs/en/index.html) - Documentation of prettier.
1515
- [Husky 8](https://typicode.github.io/husky/#/) - Documentation of husky.
16-
- [Lint Staged 13](https://github.com/okonet/lint-staged) - Documentation of lint staged.
16+
- [Lint Staged 14](https://github.com/okonet/lint-staged) - Documentation of lint staged.
1717

1818
## Usage
1919

20-
This project using node >= 14.19.2 & yarn
20+
This project using node >= 16.14 & yarn
2121

2222
### Installation
2323

@@ -47,6 +47,8 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd
4747

4848
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
4949

50+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
51+
5052
#### Docker Build
5153

5254
```bash

‎components/index.tsx‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎global.d.ts‎

Whitespace-only changes.

‎package.json‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "next-typescript-starter",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"description": "Unofficial Next.js + Typescript starter with a latest package",
55
"author": "Danang Eko Alfianto <github.com/danangekal>",
66
"homepage": "https://github.com/danangekal/next-typescript-starter#readme",
@@ -26,7 +26,6 @@
2626
"dev": "next dev",
2727
"build": "next build",
2828
"start": "next start",
29-
"telemetry": "next telemetry",
3029
"lint": "next lint",
3130
"format": "prettier --ignore-path .gitignore \"**/*.+(js|ts|tsx|css|scss|json|md|html)\" --write",
3231
"type-check": "tsc --noEmit",
@@ -37,24 +36,24 @@
3736
"postpublish": "pinst --enable"
3837
},
3938
"dependencies": {
40-
"next": "^12.3.1",
39+
"next": "^13.5.4",
4140
"react": "^18.2.0",
4241
"react-dom": "^18.2.0"
4342
},
4443
"devDependencies": {
45-
"@types/node": "18.8.4",
46-
"@types/react": "^18.0.21",
47-
"@types/react-dom": "18.0.6",
48-
"eslint": "8.25.0",
49-
"eslint-config-next": "^12.3.1",
50-
"eslint-config-prettier": "^8.5.0",
51-
"husky": "^8.0.1",
52-
"lint-staged": "^13.0.3",
44+
"@types/node": "^20.8.4",
45+
"@types/react": "^18.2.27",
46+
"@types/react-dom": "^18.2.12",
47+
"eslint": "^8.51.0",
48+
"eslint-config-next": "^13.5.4",
49+
"eslint-config-prettier": "^9.0.0",
50+
"husky": "^8.0.3",
51+
"lint-staged": "^14.0.1",
5352
"pinst": "^3.0.0",
54-
"prettier": "^2.7.1",
55-
"typescript": "4.8.4"
53+
"prettier": "^3.0.3",
54+
"typescript": "^5.2.2"
5655
},
5756
"engines": {
58-
"node": ">=14.19.2"
57+
"node": ">=16.14"
5958
}
6059
}

‎pages/_app.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import '../styles/globals.css';
2-
import { AppProps /* , AppContext */ } from 'next/app';
1+
import '@/styles/globals.css';
2+
import type { AppProps /* , AppContext */ } from 'next/app';
33

44
function App({ Component, pageProps }: AppProps) {
55
return <Component {...pageProps} />;

‎pages/_document.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Html, Head, Main, NextScript } from 'next/document';
2+
3+
export default function Document() {
4+
return (
5+
<Html lang="en">
6+
<Head />
7+
<body>
8+
<Main />
9+
<NextScript />
10+
</body>
11+
</Html>
12+
);
13+
}

‎pages/api/hello.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { NextApiRequest, NextApiResponse } from 'next';
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
import type { NextApiRequest, NextApiResponse } from 'next';
23

34
type Data = {
45
name: string;
56
};
67

7-
export default function Main(_: NextApiRequest, res: NextApiResponse<Data>) {
8+
export default function handler(_: NextApiRequest, res: NextApiResponse<Data>) {
89
res.status(200).json({ name: 'John Doe' });
910
}

‎pages/index.tsx‎

Lines changed: 86 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,118 @@
1-
import Image from 'next/image';
21
import Head from 'next/head';
3-
import styles from '../styles/Home.module.css';
2+
import Image from 'next/image';
3+
import { Inter } from 'next/font/google';
4+
import styles from '@/styles/Home.module.css';
5+
6+
const inter = Inter({ subsets: ['latin'] });
47

58
export default function Home() {
69
return (
7-
<div className={styles.container}>
10+
<>
811
<Head>
912
<title>Next Typescript Starter</title>
13+
<meta
14+
name="description"
15+
content="Generated by create next app and customized"
16+
/>
17+
<meta name="viewport" content="width=device-width, initial-scale=1" />
1018
<link rel="icon" href="/favicon.ico" />
1119
</Head>
1220

13-
<main className={styles.main}>
14-
<h1 className={styles.title}>
15-
Welcome to <a href="https://nextjs.org">Next.js!</a>
16-
</h1>
21+
<main className={`${styles.main} ${inter.className}`}>
22+
<div className={styles.description}>
23+
<p>
24+
Get started by editing&nbsp;
25+
<code className={styles.code}>pages/index.tsx</code>
26+
</p>
27+
<div>
28+
<a
29+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
>
33+
By{' '}
34+
<Image
35+
src="/vercel.svg"
36+
alt="Vercel Logo"
37+
className={styles.vercelLogo}
38+
width={100}
39+
height={24}
40+
priority
41+
/>
42+
</a>
43+
</div>
44+
</div>
1745

18-
<p className={styles.description}>
19-
Get started by editing{' '}
20-
<code className={styles.code}>pages/index.tsx</code>
21-
</p>
46+
<div className={styles.center}>
47+
<Image
48+
className={styles.logo}
49+
src="/next.svg"
50+
alt="Next.js Logo"
51+
width={180}
52+
height={37}
53+
priority
54+
/>
55+
</div>
2256

2357
<div className={styles.grid}>
24-
<a href="https://nextjs.org/docs" className={styles.card}>
25-
<h3>Documentation &rarr;</h3>
26-
<p>Find in-depth information about Next.js features and API.</p>
58+
<a
59+
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
60+
className={styles.card}
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
>
64+
<h2>
65+
Docs <span>-&gt;</span>
66+
</h2>
67+
<p>
68+
Find in-depth information about Next.js features and&nbsp;API.
69+
</p>
2770
</a>
2871

29-
<a href="https://nextjs.org/learn" className={styles.card}>
30-
<h3>Learn &rarr;</h3>
31-
<p>Learn about Next.js in an interactive course with quizzes!</p>
72+
<a
73+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
74+
className={styles.card}
75+
target="_blank"
76+
rel="noopener noreferrer"
77+
>
78+
<h2>
79+
Learn <span>-&gt;</span>
80+
</h2>
81+
<p>
82+
Learn about Next.js in an interactive course with&nbsp;quizzes!
83+
</p>
3284
</a>
3385

3486
<a
35-
href="https://github.com/vercel/next.js/tree/master/examples"
87+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
3688
className={styles.card}
89+
target="_blank"
90+
rel="noopener noreferrer"
3791
>
38-
<h3>Examples &rarr;</h3>
39-
<p>Discover and deploy boilerplate example Next.js projects.</p>
92+
<h2>
93+
Templates <span>-&gt;</span>
94+
</h2>
95+
<p>
96+
Discover and deploy boilerplate example Next.js&nbsp;projects.
97+
</p>
4098
</a>
4199

42100
<a
43101
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
44102
className={styles.card}
103+
target="_blank"
104+
rel="noopener noreferrer"
45105
>
46-
<h3>Deploy &rarr;</h3>
106+
<h2>
107+
Deploy <span>-&gt;</span>
108+
</h2>
47109
<p>
48-
Instantly deploy your Next.js site to a public URL with Vercel.
110+
Instantly deploy your Next.js site to a shareable URL
111+
with&nbsp;Vercel.
49112
</p>
50113
</a>
51114
</div>
52115
</main>
53-
54-
<footer className={styles.footer}>
55-
<a
56-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
57-
target="_blank"
58-
rel="noopener noreferrer"
59-
>
60-
Powered by{' '}
61-
<Image
62-
src="/vercel.svg"
63-
alt="Vercel Logo"
64-
className={styles.logo}
65-
width={70}
66-
height={70}
67-
/>
68-
</a>
69-
</footer>
70-
</div>
116+
</>
71117
);
72118
}

‎public/favicon.ico‎

10.6 KB
Binary file not shown.

‎public/next.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)