es lint configured

Author: WojciechCendrzak

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es6: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+  ignorePatterns: ["node_modules/*", ".next/*", ".out/*", "!.prettierrc.js"], // We don't want to lint generated files nor node_modules, but we want to lint .prettierrc.js (ignored by default by eslint)
+  extends: ["eslint:recommended"],
+  overrides: [
+    // This configuration will apply only to TypeScript files
+    {
+      files: ["**/*.ts", "**/*.tsx"],
+      parser: "@typescript-eslint/parser",
+      settings: { react: { version: "detect" } },
+      env: {
+        browser: true,
+        node: true,
+        es6: true,
+      },
+      extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended", // TypeScript rules
+        "plugin:react/recommended", // React rules
+        "plugin:react-hooks/recommended", // React hooks rules
+        "plugin:jsx-a11y/recommended", // Accessibility rules
+      ],
+      rules: {
+        "react/prop-types": "off",
+        "react/react-in-jsx-scope": "off",
+        // This rule is not compatible with Next.js's <Link /> components
+        "jsx-a11y/anchor-is-valid": "off",
+        "@typescript-eslint/no-unused-vars": ["error"],
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+      },
+    },
+  ],
+};

components/date.tsx

@@ -1,6 +1,5 @@
 import { parseISO, format } from "date-fns";
 
-export default function Date({ dateString }) {
-  const date = parseISO(dateString);
-  return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time>;
-}
+export const Date: React.FC<{ date: string }> = ({ date }) => (
+  <time dateTime={date}>{format(parseISO(date), "LLLL d, yyyy")}</time>
+);

lib/posts.ts

@@ -3,11 +3,11 @@ import path from "path";
 import matter from "gray-matter";
 import remark from "remark";
 import html from "remark-html";
-import { PostMeta } from "../models/post";
+import { Post, PostMeta } from "../models/post";
 
 const postsDirectory = path.join(process.cwd(), "posts");
 
-export function getSortedPostsData(): PostMeta[] {
+export const getSortedPostsData = (): Post[] => {
   // Get file names under /posts
   const fileNames = fs.readdirSync(postsDirectory);
   const allPostsData = fileNames.map((fileName) => {
@@ -22,22 +22,25 @@ export function getSortedPostsData(): PostMeta[] {
     const matterResult = matter(fileContents);
 
     // Combine the data with the id
+    // const resul
     return {
       id,
-      ...matterResult.data,
-    } as PostMeta;
+      ...(matterResult.data as PostMeta),
+    };
   });
   // Sort posts by date
   return allPostsData.sort((a, b) => {
+    if (!a.date || !b.date) return 0;
+
     if (a.date < b.date) {
       return 1;
     } else {
       return -1;
     }
   });
-}
+};
 
-export function getAllPostIds() {
+export const getAllPostIds = () => {
   const fileNames = fs.readdirSync(postsDirectory);
   return fileNames.map((fileName) => {
     return {
@@ -46,7 +49,7 @@ export function getAllPostIds() {
       },
     };
   });
-}
+};
 
 export const getPostData = async (id: string) => {
   const fullPath = path.join(postsDirectory, `${id}.md`);

models/post.ts

@@ -1,5 +1,9 @@
 export interface PostMeta {
-  id: string;
   title?: string;
   date?: string;
+  contentHtml?: string;
+}
+
+export interface Post extends PostMeta {
+  id: string;
 }

package.json

@@ -1,11 +1,12 @@
 {
-  "name": "my-app",
+  "name": "blog",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "eslint . --ext .ts"
   },
   "dependencies": {
     "date-fns": "^2.11.1",
@@ -19,6 +20,12 @@
   "devDependencies": {
     "@types/node": "^15.6.0",
     "@types/react": "^17.0.6",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
+    "@typescript-eslint/parser": "^4.24.0",
+    "eslint": "^7.27.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "typescript": "^4.2.4"
   }
 }

pages/_app.tsx

@@ -1,5 +1,12 @@
 import "../styles/global.css";
 
-export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+interface AppProps {
+  Component: any;
+  pageProps: any;
 }
+
+const App: React.FC<AppProps> = ({ Component, pageProps }) => {
+  return <Component {...pageProps} />;
+};
+
+export default App;

pages/api/hello.ts

@@ -1,3 +1,5 @@
-export default (req, res) => {
-  res.status(200).json({ text: "Hello" });
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  res.status(200).json({ name: "John Doe" });
 };

pages/index.tsx

@@ -3,10 +3,16 @@ import { Layout, siteTitle } from "../components/layout";
 import utilStyles from "../styles/utils.module.css";
 import { getSortedPostsData } from "../lib/posts";
 import Link from "next/link";
-import Date from "../components/date";
+import { Date } from "../components/date";
 import { GetStaticProps } from "next";
+import React from "react";
+import { Post } from "../models/post";
 
-export default function Home({ allPostsData }) {
+interface HomeProps {
+  allPostsData: Post[];
+}
+
+export const Home: React.FC<HomeProps> = ({ allPostsData }) => {
   return (
     <Layout home>
       <Head>
@@ -28,22 +34,26 @@ export default function Home({ allPostsData }) {
                 <a>{title}</a>
               </Link>
               <br />
-              <small className={utilStyles.lightText}>
-                <Date dateString={date} />
-              </small>
+              {date && (
+                <small className={utilStyles.lightText}>
+                  <Date date={date} />
+                </small>
+              )}
             </li>
           ))}
         </ul>
       </section>
     </Layout>
   );
-}
+};
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getStaticProps: GetStaticProps<HomeProps> = async () => {
   const allPostsData = getSortedPostsData();
   return {
     props: {
       allPostsData,
     },
   };
 };
+
+export default Home;

pages/posts/[id].tsx

@@ -1,22 +1,32 @@
 import { Layout } from "../../components/layout";
 import { getAllPostIds, getPostData } from "../../lib/posts";
 import Head from "next/head";
-import Date from "../../components/date";
+import { Date } from "../../components/date";
 import utilStyles from "../../styles/utils.module.css";
 import { GetStaticPaths, GetStaticProps } from "next";
+import React from "react";
+import { Post } from "../../models/post";
 
-const Post = ({ postData }) => {
+interface PostPageProps {
+  postData: Post;
+}
+
+const PostPage: React.FC<PostPageProps> = ({ postData }) => {
   return (
     <Layout>
       <Head>
         <title>{postData.title}</title>
       </Head>
       <article>
         <h1 className={utilStyles.headingXl}>{postData.title}</h1>
-        <div className={utilStyles.lightText}>
-          <Date dateString={postData.date} />
-        </div>
-        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
+        {postData.date && (
+          <div className={utilStyles.lightText}>
+            <Date date={postData.date} />
+          </div>
+        )}
+        {postData.contentHtml && (
+          <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
+        )}
       </article>
     </Layout>
   );
@@ -31,14 +41,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
 };
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  if (Array.isArray(params.id)) return undefined;
+  if (!params || !params.id || Array.isArray(params.id)) return { props: {} };
 
   const postData = await getPostData(params.id);
+
   return {
     props: {
       postData,
     },
   };
 };
 
-export default Post;
+export default PostPage;

tsconfig.json

@@ -1,14 +1,12 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
@@ -18,12 +16,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }