Skip to content

Commit

Permalink
Merge pull request #7 from danangekal/feature/update-next-13
Browse files Browse the repository at this point in the history
refactor: update next 13 & other deps with new UI
  • Loading branch information
danangekal authored Oct 11, 2023
2 parents 69141bc + c31d76e commit 439fa99
Show file tree
Hide file tree
Showing 14 changed files with 1,534 additions and 906 deletions.
14 changes: 8 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ You can check [demo](https://next-typescript-pwa-starter.vercel.app/)
## Features

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

## Usage

This project using node >= 14.19.2 & yarn
This project using node >= 16.14 & yarn 1.22.19

### Installation

Expand Down Expand Up @@ -48,6 +48,8 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd

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.

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

#### Docker Build

```bash
Expand Down
Empty file removed global.d.ts
Empty file.
25 changes: 12 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
"telemetry": "next telemetry",
"lint": "next lint",
"format": "prettier --ignore-path .gitignore \"**/*.+(js|ts|tsx|css|scss|json|md|html)\" --write",
"type-check": "tsc --noEmit",
Expand All @@ -37,25 +36,25 @@
"postpublish": "pinst --enable"
},
"dependencies": {
"next": "^12.3.1",
"next": "^13.5.4",
"next-pwa": "^5.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "18.8.4",
"@types/react": "^18.0.21",
"@types/react-dom": "18.0.6",
"eslint": "8.25.0",
"eslint-config-next": "^12.3.1",
"eslint-config-prettier": "^8.5.0",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"@types/node": "^20.8.4",
"@types/react": "^18.2.27",
"@types/react-dom": "^18.2.12",
"eslint": "^8.51.0",
"eslint-config-next": "^13.5.4",
"eslint-config-prettier": "^9.0.0",
"husky": "^8.0.3",
"lint-staged": "^14.0.1",
"pinst": "^3.0.0",
"prettier": "^2.7.1",
"typescript": "4.8.4"
"prettier": "^3.0.3",
"typescript": "^5.2.2"
},
"engines": {
"node": ">=14.19.2"
"node": ">=16.14"
}
}
5 changes: 2 additions & 3 deletions pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { AppProps /* , AppContext */ } from 'next/app';

import 'styles/globals.css';
import '@/styles/globals.css';
import type { AppProps /* , AppContext */ } from 'next/app';

function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
Expand Down
13 changes: 13 additions & 0 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
5 changes: 3 additions & 2 deletions pages/api/hello.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { NextApiRequest, NextApiResponse } from 'next';
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
name: string;
};

export default function Main(_: NextApiRequest, res: NextApiResponse<Data>) {
export default function handler(_: NextApiRequest, res: NextApiResponse<Data>) {
res.status(200).json({ name: 'John Doe' });
}
123 changes: 82 additions & 41 deletions pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,70 +1,111 @@
import Image from 'next/image';
import { Inter } from 'next/font/google';

import styles from 'styles/Home.module.css';
import Nav from 'components/nav';
import Nav from '@/components/nav';
import styles from '@/styles/Home.module.css';

const inter = Inter({ subsets: ['latin'] });

export default function Home() {
return (
<div className={styles.container}>
<>
<Nav />
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js</a> +{' '}
<a href="https://www.npmjs.com/package/next-pwa">PWA!</a>
</h1>

<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</code>
</p>
<main className={`${styles.main} ${inter.className}`}>
<div className={styles.description}>
<p>
Get started by editing&nbsp;
<code className={styles.code}>pages/index.tsx</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority
/>
</a>
</div>
</div>

<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>

<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Docs <span>-&gt;</span>
</h2>
<p>
Find in-depth information about Next.js features and&nbsp;API.
</p>
</a>

<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Learn <span>-&gt;</span>
</h2>
<p>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>

<a
href="https://github.com/vercel/next.js/tree/master/examples"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
<h2>
Templates <span>-&gt;</span>
</h2>
<p>
Discover and deploy boilerplate example Next.js&nbsp;projects.
</p>
</a>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h3>Deploy &rarr;</h3>
<h2>
Deploy <span>-&gt;</span>
</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
Instantly deploy your Next.js site to a shareable URL
with&nbsp;Vercel.
</p>
</a>
</div>
</main>

<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.logo}
width={70}
height={70}
/>
</a>
</footer>
</div>
</>
);
}
Binary file modified public/favicon.ico
Binary file not shown.
1 change: 1 addition & 0 deletions public/next.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 1 addition & 4 deletions public/vercel.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

1 comment on commit 439fa99

@vercel
Copy link

@vercel vercel bot commented on 439fa99 Oct 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.