diff --git a/nextjs/.eslintrc.json b/nextjs/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/nextjs/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/nextjs/.gitignore b/nextjs/.gitignore index f74c781..8f322f0 100644 --- a/nextjs/.gitignore +++ b/nextjs/.gitignore @@ -1,2 +1,35 @@ -.next -node_modules +# 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* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/nextjs/README.md b/nextjs/README.md index b12f3e3..5ae7daf 100644 --- a/nextjs/README.md +++ b/nextjs/README.md @@ -8,15 +8,17 @@ First, run the development server: npm run dev # or yarn dev +# or +pnpm dev +# or +bun run 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.js`. 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.js`. +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. -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. ## Learn More diff --git a/nextjs/app/favicon.ico b/nextjs/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/nextjs/app/favicon.ico differ diff --git a/nextjs/app/globals.css b/nextjs/app/globals.css new file mode 100644 index 0000000..fd81e88 --- /dev/null +++ b/nextjs/app/globals.css @@ -0,0 +1,27 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} diff --git a/nextjs/app/layout.tsx b/nextjs/app/layout.tsx new file mode 100644 index 0000000..ae84562 --- /dev/null +++ b/nextjs/app/layout.tsx @@ -0,0 +1,22 @@ +import './globals.css' +import type { Metadata } from 'next' +import { Inter } from 'next/font/google' + +const inter = Inter({ subsets: ['latin'] }) + +export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/nextjs/app/page.tsx b/nextjs/app/page.tsx new file mode 100644 index 0000000..7a8286b --- /dev/null +++ b/nextjs/app/page.tsx @@ -0,0 +1,113 @@ +import Image from 'next/image' + +export default function Home() { + return ( +
+
+

+ Get started by editing  + app/page.tsx +

+
+ + By{' '} + Vercel Logo + +
+
+ +
+ Next.js Logo +
+ +
+ +

+ Docs{' '} + + -> + +

+

+ Find in-depth information about Next.js features and API. +

+ + + +

+ Learn{' '} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

+ Templates{' '} + + -> + +

+

+ Explore the Next.js 13 playground. +

+ + + +

+ Deploy{' '} + + -> + +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ +
+
+ ) +} diff --git a/nextjs/next.config.js b/nextjs/next.config.js new file mode 100644 index 0000000..767719f --- /dev/null +++ b/nextjs/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {} + +module.exports = nextConfig diff --git a/nextjs/package.json b/nextjs/package.json index 4402887..2142dec 100644 --- a/nextjs/package.json +++ b/nextjs/package.json @@ -1,14 +1,25 @@ { - "name": "nextjs-starter", + "name": "nextjs", + "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", - "start": "next start" + "start": "next start", + "lint": "next lint" }, "dependencies": { - "next": "^13.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "@types/node": "20.6.2", + "@types/react": "18.2.22", + "@types/react-dom": "18.2.7", + "autoprefixer": "10.4.15", + "eslint": "8.49.0", + "eslint-config-next": "13.5.1", + "next": "13.5.1", + "postcss": "8.4.30", + "react": "18.2.0", + "react-dom": "18.2.0", + "tailwindcss": "3.3.3", + "typescript": "5.2.2" } } diff --git a/nextjs/pages/_app.js b/nextjs/pages/_app.js deleted file mode 100644 index 244e40b..0000000 --- a/nextjs/pages/_app.js +++ /dev/null @@ -1,7 +0,0 @@ -import '../styles/globals.css'; - -function MyApp({ Component, pageProps }) { - return ; -} - -export default MyApp; diff --git a/nextjs/pages/api/hello.js b/nextjs/pages/api/hello.js deleted file mode 100644 index a7fedaf..0000000 --- a/nextjs/pages/api/hello.js +++ /dev/null @@ -1,7 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -export default (req, res) => { - // Open Chrome DevTools to step through the debugger! - // debugger; - res.status(200).json({ name: 'Hello, world!' }); -}; diff --git a/nextjs/pages/index.js b/nextjs/pages/index.js deleted file mode 100644 index 36525f5..0000000 --- a/nextjs/pages/index.js +++ /dev/null @@ -1,59 +0,0 @@ -import Head from 'next/head'; -import styles from '../styles/Home.module.css'; - -export default function Home() { - return ( -
- - Create Next App - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.js -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
- - -
- ); -} diff --git a/nextjs/postcss.config.js b/nextjs/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/nextjs/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/nextjs/public/next.svg b/nextjs/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/nextjs/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/nextjs/public/vercel.svg b/nextjs/public/vercel.svg new file mode 100644 index 0000000..d2f8422 --- /dev/null +++ b/nextjs/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/nextjs/styles/Home.module.css b/nextjs/styles/Home.module.css deleted file mode 100644 index 42e7e60..0000000 --- a/nextjs/styles/Home.module.css +++ /dev/null @@ -1,122 +0,0 @@ -.container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.main { - padding: 5rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; -} - -.footer img { - margin-left: 0.5rem; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; -} - -.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 { - 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; - margin-top: 3rem; -} - -.card { - margin: 1rem; - flex-basis: 45%; - 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; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h3 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/nextjs/styles/globals.css b/nextjs/styles/globals.css deleted file mode 100644 index e5e2dcc..0000000 --- a/nextjs/styles/globals.css +++ /dev/null @@ -1,16 +0,0 @@ -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; -} diff --git a/nextjs/tailwind.config.ts b/nextjs/tailwind.config.ts new file mode 100644 index 0000000..c7ead80 --- /dev/null +++ b/nextjs/tailwind.config.ts @@ -0,0 +1,20 @@ +import type { Config } from 'tailwindcss' + +const config: Config = { + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}', + ], + theme: { + extend: { + backgroundImage: { + 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', + 'gradient-conic': + 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + }, + }, + }, + plugins: [], +} +export default config diff --git a/nextjs/tsconfig.json b/nextjs/tsconfig.json new file mode 100644 index 0000000..c714696 --- /dev/null +++ b/nextjs/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}