{ | |||||
"extends": "next/core-web-vitals" | |||||
} |
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | |||||
# dependencies | |||||
/node_modules | |||||
/.pnp | |||||
.pnp.js | |||||
# testing | |||||
/coverage | |||||
# next.js | |||||
/.next/ | |||||
/out/ | |||||
# production | |||||
/build | |||||
# misc | |||||
.DS_Store | |||||
*.pem | |||||
# debug | |||||
npm-debug.log* | |||||
yarn-debug.log* | |||||
yarn-error.log* | |||||
.pnpm-debug.log* | |||||
# local env files | |||||
.env*.local | |||||
# vercel | |||||
.vercel | |||||
# typescript | |||||
*.tsbuildinfo |
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). | |||||
## Getting Started | |||||
First, run the development server: | |||||
```bash | |||||
npm run dev | |||||
# or | |||||
yarn dev | |||||
``` | |||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | |||||
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. | |||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. | |||||
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. | |||||
## Learn More | |||||
To learn more about Next.js, take a look at the following resources: | |||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | |||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. | |||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! | |||||
## Deploy on Vercel | |||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. | |||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
/// <reference types="next" /> | |||||
/// <reference types="next/image-types/global" /> | |||||
// NOTE: This file should not be edited | |||||
// see https://nextjs.org/docs/basic-features/typescript for more information. |
/** @type {import('next').NextConfig} */ | |||||
const nextConfig = { | |||||
reactStrictMode: true, | |||||
} | |||||
module.exports = nextConfig |
{ | |||||
"name": "frontend", | |||||
"version": "0.1.0", | |||||
"private": true, | |||||
"scripts": { | |||||
"dev": "next dev", | |||||
"build": "next build", | |||||
"start": "next start", | |||||
"lint": "next lint" | |||||
}, | |||||
"dependencies": { | |||||
"next": "12.1.6", | |||||
"react": "18.2.0", | |||||
"react-dom": "18.2.0" | |||||
}, | |||||
"devDependencies": { | |||||
"@types/node": "18.0.0", | |||||
"@types/react": "18.0.13", | |||||
"@types/react-dom": "18.0.5", | |||||
"eslint": "8.17.0", | |||||
"eslint-config-next": "12.1.6", | |||||
"typescript": "4.7.3" | |||||
} | |||||
} |
import '../styles/globals.css' | |||||
import type { AppProps } from 'next/app' | |||||
function MyApp({ Component, pageProps }: AppProps) { | |||||
return <Component {...pageProps} /> | |||||
} | |||||
export default MyApp |
// 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 handler( | |||||
req: NextApiRequest, | |||||
res: NextApiResponse<Data> | |||||
) { | |||||
res.status(200).json({ name: 'John Doe' }) | |||||
} |
import type { NextPage } from 'next' | |||||
import Head from 'next/head' | |||||
import Image from 'next/image' | |||||
import styles from '../styles/Home.module.css' | |||||
const Home: NextPage = () => { | |||||
return ( | |||||
<div className={styles.container}> | |||||
<Head> | |||||
<title>Create Next App</title> | |||||
<meta name="description" content="Generated by create next app" /> | |||||
<link rel="icon" href="/favicon.ico" /> | |||||
</Head> | |||||
<main className={styles.main}> | |||||
<h1 className={styles.title}> | |||||
Welcome to <a href="https://nextjs.org">Next.js!</a> | |||||
</h1> | |||||
<p className={styles.description}> | |||||
Get started by editing{' '} | |||||
<code className={styles.code}>pages/index.tsx</code> | |||||
</p> | |||||
<div className={styles.grid}> | |||||
<a href="https://nextjs.org/docs" className={styles.card}> | |||||
<h2>Documentation →</h2> | |||||
<p>Find in-depth information about Next.js features and API.</p> | |||||
</a> | |||||
<a href="https://nextjs.org/learn" className={styles.card}> | |||||
<h2>Learn →</h2> | |||||
<p>Learn about Next.js in an interactive course with quizzes!</p> | |||||
</a> | |||||
<a | |||||
href="https://github.com/vercel/next.js/tree/canary/examples" | |||||
className={styles.card} | |||||
> | |||||
<h2>Examples →</h2> | |||||
<p>Discover and deploy boilerplate example Next.js 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} | |||||
> | |||||
<h2>Deploy →</h2> | |||||
<p> | |||||
Instantly deploy your Next.js site to a public URL with 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{' '} | |||||
<span className={styles.logo}> | |||||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> | |||||
</span> | |||||
</a> | |||||
</footer> | |||||
</div> | |||||
) | |||||
} | |||||
export default Home |
<svg width="283" height="64" viewBox="0 0 283 64" fill="none" | |||||
xmlns="http://www.w3.org/2000/svg"> | |||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/> | |||||
</svg> |
.container { | |||||
padding: 0 2rem; | |||||
} | |||||
.main { | |||||
min-height: 100vh; | |||||
padding: 4rem 0; | |||||
flex: 1; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.footer { | |||||
display: flex; | |||||
flex: 1; | |||||
padding: 2rem 0; | |||||
border-top: 1px solid #eaeaea; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.footer a { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
flex-grow: 1; | |||||
} | |||||
.title a { | |||||
color: #0070f3; | |||||
text-decoration: none; | |||||
} | |||||
.title a:hover, | |||||
.title a:focus, | |||||
.title a:active { | |||||
text-decoration: underline; | |||||
} | |||||
.title { | |||||
margin: 0; | |||||
line-height: 1.15; | |||||
font-size: 4rem; | |||||
} | |||||
.title, | |||||
.description { | |||||
text-align: center; | |||||
} | |||||
.description { | |||||
margin: 4rem 0; | |||||
line-height: 1.5; | |||||
font-size: 1.5rem; | |||||
} | |||||
.code { | |||||
background: #fafafa; | |||||
border-radius: 5px; | |||||
padding: 0.75rem; | |||||
font-size: 1.1rem; | |||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, | |||||
Bitstream Vera Sans Mono, Courier New, monospace; | |||||
} | |||||
.grid { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
flex-wrap: wrap; | |||||
max-width: 800px; | |||||
} | |||||
.card { | |||||
margin: 1rem; | |||||
padding: 1.5rem; | |||||
text-align: left; | |||||
color: inherit; | |||||
text-decoration: none; | |||||
border: 1px solid #eaeaea; | |||||
border-radius: 10px; | |||||
transition: color 0.15s ease, border-color 0.15s ease; | |||||
max-width: 300px; | |||||
} | |||||
.card:hover, | |||||
.card:focus, | |||||
.card:active { | |||||
color: #0070f3; | |||||
border-color: #0070f3; | |||||
} | |||||
.card h2 { | |||||
margin: 0 0 1rem 0; | |||||
font-size: 1.5rem; | |||||
} | |||||
.card p { | |||||
margin: 0; | |||||
font-size: 1.25rem; | |||||
line-height: 1.5; | |||||
} | |||||
.logo { | |||||
height: 1em; | |||||
margin-left: 0.5rem; | |||||
} | |||||
@media (max-width: 600px) { | |||||
.grid { | |||||
width: 100%; | |||||
flex-direction: column; | |||||
} | |||||
} |
html, | |||||
body { | |||||
padding: 0; | |||||
margin: 0; | |||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, | |||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; | |||||
} | |||||
a { | |||||
color: inherit; | |||||
text-decoration: none; | |||||
} | |||||
* { | |||||
box-sizing: border-box; | |||||
} |
{ | |||||
"compilerOptions": { | |||||
"target": "es5", | |||||
"lib": ["dom", "dom.iterable", "esnext"], | |||||
"allowJs": true, | |||||
"skipLibCheck": true, | |||||
"strict": true, | |||||
"forceConsistentCasingInFileNames": true, | |||||
"noEmit": true, | |||||
"esModuleInterop": true, | |||||
"module": "esnext", | |||||
"moduleResolution": "node", | |||||
"resolveJsonModule": true, | |||||
"isolatedModules": true, | |||||
"jsx": "preserve", | |||||
"incremental": true | |||||
}, | |||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], | |||||
"exclude": ["node_modules"] | |||||
} |