diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..724c175 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,17 @@ +/** + * @file ESLint configuration for the Next.js project with Prettier integration. + */ +module.exports = { + root: true, + extends: [ + 'next/core-web-vitals', + 'plugin:prettier/recommended' + ], + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module' + }, + rules: { + 'prettier/prettier': ['error'] + } +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bddda35 --- /dev/null +++ b/.gitignore @@ -0,0 +1,40 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Next.js +.next/ +out/ + +# Production +build + +# Misc +.DS_Store +*.swp + +# Dependency directories +node_modules/ + +# Local env files +.env* +!.env.example diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..4e6fd37 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changelog + +## [0.1.0] - 2025-10-29 +- Removed the placeholder root README header in favor of a project overview. +- Replaced default scaffolded boilerplate with custom TypeScript-first structure. diff --git a/README.md b/README.md index 5b75c5b..9d0494b 100644 --- a/README.md +++ b/README.md @@ -1 +1,20 @@ -# web \ No newline at end of file +# Next.js TypeScript Starter + +This project bootstraps a Next.js application configured for TypeScript, ESLint, and Prettier. + +## Getting Started + +Install dependencies and run the development server: + +```bash +npm install +npm run dev +``` + +## Available Scripts + +- `npm run dev` – start the development server. +- `npm run build` – create an optimized production build. +- `npm run start` – run the production server locally. +- `npm run lint` – execute ESLint checks. +- `npm run format` – format files with Prettier. diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..a7c4b6e --- /dev/null +++ b/next.config.js @@ -0,0 +1,13 @@ +/** + * @file Next.js configuration enabling the src directory structure. + * @see https://nextjs.org/docs/app/building-your-application/configuring + */ +const nextConfig = { + reactStrictMode: true, + swcMinify: true, + experimental: { + typedRoutes: true + } +}; + +module.exports = nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..a5eab67 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "web-app", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "format": "prettier --write ." + }, + "dependencies": { + "next": "14.2.15", + "react": "18.3.1", + "react-dom": "18.3.1" + }, + "devDependencies": { + "@types/node": "20.17.6", + "@types/react": "18.3.10", + "@types/react-dom": "18.3.5", + "eslint": "9.14.0", + "eslint-config-next": "14.2.15", + "eslint-config-prettier": "9.1.0", + "eslint-plugin-prettier": "5.2.1", + "prettier": "3.4.1", + "typescript": "5.6.3" + } +} diff --git a/prettier.config.cjs b/prettier.config.cjs new file mode 100644 index 0000000..85ce28f --- /dev/null +++ b/prettier.config.cjs @@ -0,0 +1,11 @@ +/** + * @file Shared Prettier configuration to enforce consistent formatting. + */ +module.exports = { + singleQuote: true, + semi: true, + trailingComma: 'es5', + tabWidth: 2, + printWidth: 100, + endOfLine: 'lf' +}; diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..d89a2c1 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,7 @@ + + + + TS + diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx new file mode 100644 index 0000000..1550d55 --- /dev/null +++ b/src/components/Hero.tsx @@ -0,0 +1,13 @@ +/** + * @file Hero component highlighting the primary call to action. + */ +import styles from '@/styles/Home.module.css'; + +export const Hero = () => { + return ( +
+

Welcome to the Next.js TypeScript Starter

+

Build delightful interfaces faster with a well-structured foundation.

+
+ ); +}; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..a1a83ce --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,20 @@ +/** + * @file Layout component providing consistent page chrome. + */ +import { PropsWithChildren } from 'react'; + +import styles from '@/styles/Home.module.css'; + +export const Layout = ({ children }: PropsWithChildren) => { + return ( +
+
+ Next TypeScript Starter +
+
{children}
+
+ Crafted with Next.js • {new Date().getFullYear()} +
+
+ ); +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx new file mode 100644 index 0000000..4307364 --- /dev/null +++ b/src/pages/_app.tsx @@ -0,0 +1,12 @@ +/** + * @file Custom Next.js App component responsible for global setup. + */ +import type { AppProps } from 'next/app'; + +import '@/styles/globals.css'; + +const App = ({ Component, pageProps }: AppProps) => { + return ; +}; + +export default App; diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..f2ad1ed --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,24 @@ +/** + * @file Landing page showcasing the initial project structure. + */ +import Head from 'next/head'; + +import { Hero } from '@/components/Hero'; +import { Layout } from '@/components/Layout'; + +const HomePage = () => { + return ( + + + Next.js TypeScript Starter + + + + + ); +}; + +export default HomePage; diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css new file mode 100644 index 0000000..a7da505 --- /dev/null +++ b/src/styles/Home.module.css @@ -0,0 +1,53 @@ +/* + * @file Module CSS providing styles for the landing page layout. + */ +.container { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + gap: 2rem; +} + +.header { + font-size: 1.5rem; + font-weight: 600; + letter-spacing: 0.05em; +} + +.brand { + color: #38bdf8; +} + +.main { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 1.5rem; + max-width: 48rem; +} + +.hero { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.hero h1 { + font-size: clamp(2.5rem, 5vw, 3.5rem); +} + +.hero p { + font-size: 1.25rem; + color: #cbd5f5; +} + +.footer { + font-size: 0.9rem; + color: #94a3b8; +} diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 0000000..7a46d2a --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,26 @@ +/* + * @file Global CSS resets and theme variables. + */ +:root { + color-scheme: light dark; + font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background-color: #0f172a; + color: #e2e8f0; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, +body, +#__next { + height: 100%; +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..770eece --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": false, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "baseUrl": ".", + "paths": { + "@/components/*": ["src/components/*"], + "@/styles/*": ["src/styles/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}