Skip to content

Initialize Next.js app with TypeScript, Tailwind CSS, and ESLint #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rupeshca007 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Initialize Next.js app with TypeScript, Tailwind CSS, and ESLint #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion VERSION
View file
Open in desktop

This file was deleted.

Binary file added app/favicon.ico
View file
Open in desktop
Binary file not shown.
26 changes: 26 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@import "tailwindcss";

:root {
--background: #ffffff;
--foreground: #171717;
}

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}

body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
Comment on lines +22 to +26
Copy link

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Hardcoded font-family on body overrides the Geist font setup.

Line 25 sets font-family: Arial, Helvetica, sans-serif, which will take precedence over the Geist fonts configured via next/font in layout.tsx and mapped through @theme inline on Line 11. The Geist CSS variables (--font-geist-sans) injected by the layout's className won't be used for body text.

Consider removing the hardcoded font-family or using the Tailwind token instead:

Proposed fix 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
}
🤖 Prompt for AI Agents 
In `@app/globals.css` around lines 22 - 26, The body rule in globals.css currently
hardcodes "Arial, Helvetica, sans-serif" which overrides the Geist font provided
by next/font and the className set in layout.tsx (mapped via `@theme` inline and
the --font-geist-sans CSS variable); update the body style to stop hardcoding
system fonts—either remove the font-family declaration entirely or replace it
with the Geist token/variable (e.g., use var(--font-geist-sans) or the Tailwind
font token you use elsewhere) so the font injected by layout.tsx is applied
site-wide.

34 changes: 34 additions & 0 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
Comment on lines +15 to +18
Copy link

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Update placeholder metadata.

The title and description still contain the default create-next-app scaffolding text. Update these to reflect the actual project name and purpose (e.g., "OrgExplorer") before merging.

🤖 Prompt for AI Agents 
In `@app/layout.tsx` around lines 15 - 18, Update the placeholder site metadata by
replacing the default values in the exported constant metadata (export const
metadata: Metadata) — change the title and description fields from "Create Next
App" and "Generated by create next app" to the real project name and purpose
(for example "OrgExplorer" and a short description of the app) so the metadata
accurately represents the project.


export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}
65 changes: 65 additions & 0 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import Image from "next/image";

export default function Home() {
return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
</div>
</main>
</div>
);
}
23 changes: 0 additions & 23 deletions eslint.config.js
View file
Open in desktop

This file was deleted.

18 changes: 18 additions & 0 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);

export default eslintConfig;
12 changes: 0 additions & 12 deletions index.html
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";

// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
Comment on lines +1 to +6
Copy link

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if .gitignore exists and whether next-env.d.ts is already listed
echo "=== Checking .gitignore ==="
if [ -f .gitignore ]; then
  echo ".gitignore exists"
  grep -n "next-env" .gitignore || echo "next-env.d.ts NOT found in .gitignore"
else
  echo ".gitignore does not exist"
fi

echo ""
echo "=== Checking git status of next-env.d.ts ==="
git ls-files | grep -i "next-env.d.ts" && echo "next-env.d.ts IS tracked in git" || echo "next-env.d.ts is NOT tracked in git"

echo ""
echo "=== Checking if next-env.d.ts exists in repo ==="
[ -f next-env.d.ts ] && echo "next-env.d.ts exists" || echo "next-env.d.ts does NOT exist"

echo ""
echo "=== Checking for .next directory ==="
[ -d .next ] && echo ".next directory exists" || echo ".next directory does NOT exist"

Repository: AOSSIE-Org/OrgExplorer

Length of output: 381

🌐 Web query:

next-env.d.ts gitignore Next.js auto-generated

💡 Result:

next-env.d.ts is a Next.js auto-generated TypeScript declaration file placed in your project root so TypeScript picks up Next.js types (e.g., for images/styles and Next.js-specific globals). It is regenerated when you run next dev, next build, or next typegen, so don’t edit it—your changes will be overwritten. [1]

Git strategy (what to do): Next.js’ current docs recommend adding next-env.d.ts to .gitignore (i.e., don’t commit it). [1]

Add this line to .gitignore:

next-env.d.ts

If you need custom global types, put them in a separate .d.ts file (e.g. new-types.d.ts) and include that in tsconfig.json, rather than modifying next-env.d.ts. [1]

Sources:
[1] Next.js TypeScript docs (next-env.d.ts section) https://nextjs.org/docs/app/api-reference/config/typescript

next-env.d.ts should not be committed — add it to .gitignore.

This file is regenerated on each next dev, next build, or next typegen run. The Next.js docs recommend adding next-env.d.ts to your .gitignore file.

Additionally, the import line toggles between .next/dev/types/routes.d.ts and .next/types/routes.d.ts depending on whether you ran next dev vs next build, resulting in persistent Git changes and noise in commits.

Add to .gitignore:

next-env.d.ts

Then remove this file from version control.

🤖 Prompt for AI Agents 
In `@next-env.d.ts` around lines 1 - 6, Add next-env.d.ts to .gitignore and remove
the committed next-env.d.ts from version control: update the repository's
.gitignore to include the entry "next-env.d.ts", then git rm --cached the
existing next-env.d.ts and commit that change so the file is no longer tracked;
ensure no code changes remain that import "./.next/dev/types/routes.d.ts" in
tracked files (the import in next-env.d.ts is the toggling line causing noise).

7 changes: 7 additions & 0 deletions next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
/* config options here */
};

export default nextConfig;
Loading