Convert to typescript

components/banner.js → components/Banner.jsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-
 import smallFlag from "/public/uswds/img/us_flag_small.png";
 import iconDotGov from "/public/uswds/img/icon-dot-gov.svg";
 import iconHttps from "/public/uswds/img/icon-https.svg";

components/gridContainer.js → components/GridContainer.jsx

@@ -1,7 +1,7 @@
-import SvgAccessibleForward from "./icons/AccessibleForward.js";
-import SvgBuild from "./icons/Build.js";
-import SvgConstructionWorker from "./icons/ConstructionWorker.js";
-import SvgGithub from "./icons/Github.js";
+import SvgAccessibleForward from "./icons/AccessibleForward";
+import SvgBuild from "./icons/Build";
+import SvgConstructionWorker from "./icons/ConstructionWorker";
+import SvgGithub from "./icons/Github";
 
 export default function GridContainer() {
   return (

components/header.js → components/Header.jsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
-
-import Banner from "./banner";
+import Banner from "./Banner";
 
 export default function Header() {
   return (

components/masthead.js → components/Masthead.jsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-
 import circle from "/public/uswds/img/circle-gray-20.svg";
 
 export default function Masthead() {

components/nav.js → components/Nav.jsx

@@ -1,4 +1,4 @@
-import Masthead from "./masthead";
+import Masthead from "./Masthead";
 
 export default function Nav() {
   return (

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <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.

package.json

@@ -2,7 +2,7 @@
   "name": "uswds_nextjs_starter",
   "version": "1.0.0",
   "description": "accessible USWDS starting point using next.js and react",
-  "main": "index.js",
+  "main": "index.jsx",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "node_modules/.bin/next dev",
@@ -27,6 +27,9 @@
     "sharp": "^0.31.3"
   },
   "devDependencies": {
-    "sass": "^1.58.0"
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "sass": "^1.58.0",
+    "typescript": "^5.5.4"
   }
 }

pages/index.js → pages/index.jsx

@@ -1,12 +1,12 @@
 import Head from "next/head";
 import Script from "next/script";
-import Header from "../components/header";
-import Hero from "../components/hero";
-import Tagline from "../components/tagline";
-import GridContainer from "../components/gridContainer";
-import Intro from "../components/intro";
-import Footer from "../components/footer";
-import Nav from "../components/nav";
+import Header from "../components/Header";
+import Hero from "../components/Hero";
+import Tagline from "../components/Tagline";
+import GridContainer from "../components/GridContainer";
+import Intro from "../components/Intro";
+import Footer from "../components/Footer";
+import Nav from "../components/Nav";
 
 export default function Home() {
   return (

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}