update: ESLintを導入

p12-sandbox · Apr 30, 2022 · 36a914f · 36a914f
1 parent 682f258
commit 36a914f
Show file tree

Hide file tree

Showing 12 changed files with 1,057 additions and 1,418 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

diff --git a/package.json b/package.json
@@ -7,21 +7,24 @@
     "build": "run-s build:posts build:next",
     "build:posts": "ts-node --project tsconfig.builder.json ./src/builder/posts.ts",
     "build:next": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "dayjs": "^1.9.3",
-    "next": "11.1.2",
+    "next": "^12.1.5",
     "next-themes": "^0.0.15",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.2",
     "@types/node": "^16.11.1",
     "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.14.0",
+    "eslint-config-next": "12.1.5",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.21.4",

diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import Link from "next/link";
+import Image from "next/image"
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-
 import { PostItem } from "@src/types";
 import {
   getMemberByName,
@@ -25,8 +25,9 @@ const PostLink: React.FC<{ item: PostItem }> = (props) => {
     <article className="post-link">
       <Link href={getMemberPath(member.id)} passHref>
         <a className="post-link__author">
-          <img
+          <Image
             src={member.avatarSrc}
+            alt={member.name}
             className="post-link__author-img"
             width={35}
             height={35}
@@ -43,12 +44,6 @@ const PostLink: React.FC<{ item: PostItem }> = (props) => {
         <h2 className="post-link__title">{title}</h2>
         {hostname && (
           <div className="post-link__site">
-            <img
-              src={getFaviconSrcFromHostname(hostname)}
-              width={14}
-              height={14}
-              className="post-link__site-favicon"
-            />
             {hostname}
           </div>
         )}

diff --git a/src/components/ScrollableMembers.tsx b/src/components/ScrollableMembers.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image"
 import { members } from "@members";
 import { getMemberPath } from "@src/utils/helper";
 
@@ -13,7 +14,7 @@ export const ScrollableMembers: React.FC = () => {
         >
           <a className="scrollable-member__link">
             <span className="scrollable-member__image">
-              <img
+              <Image
                 src={member.avatarSrc}
                 alt={member.name}
                 className="scrollable-member__img"

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -16,10 +16,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           type="image/png"
           href={`${config.siteRoot}/logo.png`}
         />
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
-        />
+
       </Head>
       <SiteHeader />
       <Component {...pageProps} />

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/src/pages/members/[id].tsx b/src/pages/members/[id].tsx
@@ -1,4 +1,5 @@
 import { NextPage, GetStaticProps, GetStaticPaths } from "next";
+import Image from "next/image"
 import { members } from "@members";
 import { PostItem, Member } from "@src/types";
 import { PostList } from "@src/components/PostList";
@@ -34,7 +35,7 @@ const Page: NextPage<Props> = (props) => {
         <ContentWrapper>
           <header className="member-header">
             <div className="member-header__avatar">
-              <img
+              <Image
                 src={avatarSrc}
                 alt={name}
                 width={100}
@@ -50,7 +51,7 @@ const Page: NextPage<Props> = (props) => {
                   href={`https://twitter.com/${twitterUsername}`}
                   className="member-header__link"
                 >
-                  <img
+                  <Image
                     src="/icons/twitter.svg"
                     alt={`Twitterのユーザー@${twitterUsername}`}
                     width={22}
@@ -63,7 +64,7 @@ const Page: NextPage<Props> = (props) => {
                   href={`https://github.com/${githubUsername}`}
                   className="member-header__link"
                 >
-                  <img
+                  <Image
                     src="/icons/github.svg"
                     alt={`GitHubのユーザー@${githubUsername}`}
                     width={22}
@@ -76,7 +77,7 @@ const Page: NextPage<Props> = (props) => {
                   href={`https://suzuri.jp/${suzuriUsername}`}
                   className="member-header__link"
                 >
-                  <img
+                  <Image
                     src="/icons/suzuri.svg"
                     alt={`suzuriのユーザー@${suzuriUsername}`}
                     width={22}
@@ -86,7 +87,7 @@ const Page: NextPage<Props> = (props) => {
               )}
               {websiteUrl && (
                 <a href={websiteUrl} className="member-header__link">
-                  <img
+                  <Image
                     src="/icons/link.svg"
                     alt={`ウェブサイトのリンク`}
                     width={22}

diff --git a/src/pages/members/index.tsx b/src/pages/members/index.tsx
@@ -1,7 +1,7 @@
 import { NextPage } from "next";
 import Link from "next/link";
 import Head from "next/head";
-
+import Image from "next/image";
 import { config } from "@site.config";
 import { members } from "@members";
 import { ContentWrapper } from "@src/components/ContentWrapper";
@@ -14,7 +14,7 @@ const MemberCard: React.FC<{ member: Member }> = ({ member }) => {
     <Link href={getMemberPath(member.id)}>
       <a className="member-card">
         <div className="member-card__avatar">
-          <img
+          <Image
             src={member.avatarSrc}
             alt={member.name}
             width={80}

diff --git a/src/styles/components/_PostList.scss b/src/styles/components/_PostList.scss
@@ -40,7 +40,7 @@ $side-padding-sm: 1rem;
 
 .post-link__author-img {
   border-radius: 50%;
-  margin-right: 0.7rem;
+  margin-right: 1rem;
 }
 .post-link__title {
   font-size: 1.1rem;

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -17,9 +21,19 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
-      "@*": ["./*"]
-    }
+      "@*": [
+        "./*"
+      ]
+    },
+    "incremental": true
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "next.config.js"
+  ]
 }