Skip to content

Commit

Permalink
#166: Upgrade Next.js
Browse files Browse the repository at this point in the history
  • Loading branch information
io-kobayashiii committed Jun 18, 2023
1 parent f44855a commit 6e87b75
Show file tree
Hide file tree
Showing 27 changed files with 415 additions and 337 deletions.
1 change: 1 addition & 0 deletions next-env.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
1 change: 1 addition & 0 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({

module.exports = withBundleAnalyzer({
reactStrictMode: false,
output: 'export',
});
12 changes: 5 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"build": "next build && next export && next-sitemap --config sitemap.config.cjs",
"analyze": "ANALYZE=true next build",
"analyze:windows": "cross-env ANALYZE=true next build",
"start": "next start",
"start": "serve out",
"lint": "next lint",
"format": "prettier --write src/**/*.{js,json,ts,tsx,css,scss}",
"watch-storybook": "concurrently \"yarn:watch:*\"",
Expand All @@ -23,11 +23,9 @@
"@coreui/icons": "^3.0.0",
"@coreui/icons-react": "^2.1.0",
"highlight.js": "^11.7.0",
"moment": "^2.29.4",
"next": "13.1.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-moment": "^1.1.3"
"next": "^13.4.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.20.12",
Expand All @@ -52,7 +50,7 @@
"concurrently": "^7.6.0",
"cross-env": "^7.0.3",
"eslint": "8.32.0",
"eslint-config-next": "13.1.5",
"eslint-config-next": "^13.4.6",
"eslint-config-prettier": "^8.6.0",
"husky": "^8.0.3",
"lint-staged": "^13.1.0",
Expand Down
92 changes: 58 additions & 34 deletions public/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -534,6 +534,14 @@ video {
margin-top: 15px;
}

.mt-40 {
margin-top: 40px;
}

.mt-20 {
margin-top: 20px;
}

.mt-30 {
margin-top: 30px;
}
Expand All @@ -550,10 +558,6 @@ video {
margin-top: 16px;
}

.mt-40 {
margin-top: 40px;
}

.mb-15 {
margin-bottom: 15px;
}
Expand All @@ -574,6 +578,14 @@ video {
display: none;
}

.h-2 {
height: 2px;
}

.h-56 {
height: 56px;
}

.w-100p {
width: 100%;
}
Expand All @@ -582,6 +594,10 @@ video {
max-width: 992px;
}

.cursor-pointer {
cursor: pointer;
}

.resize {
resize: both;
}
Expand Down Expand Up @@ -614,8 +630,8 @@ video {
border-radius: 6px;
}

.border-b-2 {
border-bottom-width: 2px;
.border {
border-width: 1px;
}

.border-t-2 {
Expand All @@ -627,19 +643,14 @@ video {
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.bg-gray-100 {
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-product-github {
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(23 21 21 / var(--tw-bg-opacity));
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.p-15 {
Expand Down Expand Up @@ -673,24 +684,28 @@ video {
padding-bottom: 5px;
}

.pt-70 {
padding-top: 70px;
.pt-76 {
padding-top: 76px;
}

.pb-50 {
padding-bottom: 50px;
.pb-20 {
padding-bottom: 20px;
}

.pb-10 {
padding-bottom: 10px;
.pt-106 {
padding-top: 106px;
}

.pt-15 {
padding-top: 15px;
.pb-50 {
padding-bottom: 50px;
}

.pb-5 {
padding-bottom: 5px;
.pt-70 {
padding-top: 70px;
}

.pt-20 {
padding-top: 20px;
}

.text-center {
Expand All @@ -717,14 +732,14 @@ video {
font-size: 12px;
}

.text-32 {
font-size: 32px;
}

.text-20 {
font-size: 20px;
}

.text-11 {
font-size: 11px;
}

.font-bold {
font-weight: 700;
}
Expand All @@ -738,6 +753,10 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

html,
body {
padding: 0;
Expand All @@ -747,7 +766,8 @@ body {

body {
font-family: 'M PLUS 1p', sans-serif;
color: #3c3c3c;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

a {
Expand Down Expand Up @@ -782,6 +802,10 @@ a {
margin-top: 30px;
}

.md\:mt-80 {
margin-top: 80px;
}

.md\:mt-50 {
margin-top: 50px;
}
Expand All @@ -794,10 +818,6 @@ a {
margin-top: 25px;
}

.md\:mt-80 {
margin-top: 80px;
}

.md\:block {
display: block;
}
Expand Down Expand Up @@ -893,6 +913,10 @@ a {
.md\:text-32 {
font-size: 32px;
}

.md\:text-12 {
font-size: 12px;
}
}

@media (min-width: 992px) {
Expand Down
18 changes: 18 additions & 0 deletions src/app/global-error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use client';

export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
);
}
59 changes: 59 additions & 0 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import '@/styles/globals.css';
import { Metadata } from 'next';
import { M_PLUS_1p } from 'next/font/google';
import ContextProviders from '@/contexts/ContextProviders';
import ApiClient from '@/utils/ApiClient';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';

const mPlus1pFont = M_PLUS_1p({
subsets: ['latin-ext'],
weight: ['400', '700'],
});

export const metadata: Metadata = {
title: 'For',
description:
'Webアプリケーション開発における備忘録や実装メモなどを発信しています。',
};

type Props = {
children: React.ReactNode;
};

export default async function RootLayout({ children }: Props) {
const { contents } = await ApiClient.categories();
return (
<html lang="jp">
<head>
<link
rel="stylesheet"
href="https://unpkg.com/@coreui/icons/css/all.min.css"
/>
<link rel="shortcut icon" href="/favicon.ico" />
<script
defer
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
/>
<script
id={'ga'}
defer
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}');`,
}}
/>
</head>
<body className={mPlus1pFont.className}>
<ContextProviders>
<Header categories={contents} />
{children}
<Footer categories={contents} />
</ContextProviders>
</body>
</html>
);
}
3 changes: 3 additions & 0 deletions src/app/not-found.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function NotFound() {
return <h1 className="text-24">Not found.</h1>;
}
39 changes: 39 additions & 0 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { ArticleCard } from '@/components/Card/ArticleCard';
import ApiClient from '@/utils/ApiClient';

export default async function Page() {
const { contents } = await ApiClient.articles();
return (
<>
<main className="bg-gray-800 pt-76 pb-20 md:pt-180 md:pb-80">
<div className="mx-auto max-w-lg px-15 md:px-30">
<ul className="md:flex md:flex-wrap md:justify-between">
{contents?.map((article, index) => (
<li
key={article.id}
className={
index == 0
? 'md:w-100p'
: 'mt-15 md:mt-30 md:w-[calc(50%-15px)]'
}
>
<ArticleCard
unevenness="bumps"
shadowColor="default"
data={{
title: article.title,
date: article.publishedAt,
href: `/articles/${article.id}`,
categories: article.categories.map(
(category) => category.name
),
}}
/>
</li>
))}
</ul>
</div>
</main>
</>
);
}
6 changes: 0 additions & 6 deletions src/components/Card/ArticleCard/ArticleCard.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,4 @@
box-shadow: 2px 2px 2px 0 rgba(6, 13, 19, 0.5) inset,
-2px -2px 2px 0 rgba(231, 231, 231, 0.5) inset;
}
&-default,
&-primary {
&:hover {
cursor: auto;
}
}
}
Loading

0 comments on commit 6e87b75

Please sign in to comment.