Skip to content

Commit dde216a

Browse files
The-InfinitysThe-Infinitys
authored
Switched to dev branch!
please fix about pre code section.
1 parent 4dbbf50 commit dde216a

File tree

13 files changed

+798
-368
lines changed

13 files changed

+798
-368
lines changed

‎package-lock.json‎

Lines changed: 354 additions & 158 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"gray-matter": "^4.0.3",
13+
"highlight.js": "^11.11.1",
1314
"i18next": "^25.0.1",
1415
"negotiator": "^1.0.0",
1516
"next": "15.3.1",

‎public/article-2025/04/renewed-with-nextjs/article.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: Next.jsで生まれ変わる！
3+
date: "2025-04-28"
4+
description: "記事のデータが引き継げませんでした(´・ω・)"
5+
---
6+
7+
# Next.js
8+
9+
Hello, World!
10+
11+
どうも！ The Infinity's です！
12+
今回！ついに！私のサイトを Next.js で置き換えることに成功しました！
13+
14+
## Next.js に変えようと思った経緯
15+
16+
Web サイトを Next.js に変えようと思ったのには様々な理由がありますが、
17+
特に大きかったのは**パフォーマンスの向上**と**開発体験の向上**、
18+
19+
そして**SSG（Static Site Generation、静的サイト生成)**の実現でした。
20+
21+
### パフォーマンスの向上（SSG について）
22+
23+
以前のサイトでは、アクセスが増加した際に表示速度が遅くなることが課題でした。そこで注目したのが Next.js の SSG（Static Site Generation）です。SSG は、**事前に HTML ファイルを生成しておくことで、ユーザーがアクセスした際に高速にページを表示できる**という点が魅力です。
24+
25+
まるで、レストランで注文を受けてから料理を作るのではなく、人気メニューをあらかじめ用意しておくようなイメージでしょうか。これにより、サーバーへの負荷を減らし、**爆速でコンテンツを届けることができる**らしいです！
26+
27+
### 開発体験の向上（TypeScript, TSX）
28+
29+
また、開発体験の向上も大きな理由の一つです。
30+
以前から**TypeScript や JSX での開発に興味**があり、
31+
より型安全でコンポーネントベースの開発を効率的に行いたいと考えていました。
32+
33+
Next.js は TypeScript を標準でサポートしており、
34+
React の JSX と組み合わせることで、**よりモダンで保守性の高いコード**を書くことができます。
35+
(TSX)学習はかなり大変でしたが、実際に開発を始めてみると、その恩恵をひしひしと感じています。
36+
コードの可読性が向上し、バグも早期に発見しやすくなったと実感しています。
37+
新しい技術を学ぶのは大変でしたが、それに見合うだけの価値は十分にあると感じています！💻
38+
39+
#### TypeScriptの例
40+
41+
```tsx
42+
"use client";
43+
44+
import { useState, useEffect } from "react";
45+
46+
export default function BackToTopButton() {
47+
const [isVisible, setIsVisible] = useState(false);
48+
49+
useEffect(() => {
50+
const handleScroll = () => {
51+
setIsVisible(window.scrollY > 300); // 300px以上スクロールしたら表示
52+
};
53+
54+
window.addEventListener("scroll", handleScroll);
55+
return () => window.removeEventListener("scroll", handleScroll);
56+
}, []);
57+
58+
const scrollToTop = () => {
59+
window.scrollTo({ top: 0, behavior: "smooth" });
60+
};
61+
62+
return (
63+
<button
64+
onClick={scrollToTop}
65+
className={`back-to-top ${isVisible ? "visible" : ""}`}
66+
aria-label="ページの先頭に戻る"
67+
>
68+
<svg
69+
xmlns="http://www.w3.org/2000/svg"
70+
viewBox="0 0 24 24"
71+
fill="currentColor"
72+
width="36"
73+
height="36"
74+
>
75+
<path d="M12 4l-8 8h4l4 8l4 -8h4z" />
76+
</svg>
77+
</button>
78+
);
79+
}
80+
```
81+
82+
### 実現したかった機能：SSG
83+
84+
そして、最も実現したかった機能が、先ほども触れた**SSG（Static Site Generation）**です。
85+
ブログのような静的なコンテンツが中心のサイトでは、SSG の恩恵を最大限に活かせると考えました。
86+
87+
**コンテンツを事前に生成することで、表示速度が向上するだけでなく、セキュリティ面でも有利**になります。
88+
また、CDN との相性も良く、より安定した配信が可能になります。
89+
今回の Next.js への移行は、まさにこの SSG を活用して、より快適なウェブサイト体験を提供したいという強い思いから実現しました。
90+
91+
## まとめと今後の展望
92+
93+
今回の Next.js への移行は、パフォーマンスの向上、開発体験の向上、そして何より SSG による高速で安定したウェブサイトの実現という、私にとって大きな一歩となりました。記事のデータ移行という想定外の課題はありましたが、新しい技術に触れ、学びながらサイトを再構築していく過程は、非常に刺激的で楽しいものでした。
94+
95+
まだ移行したばかりで、これからさらに Next.js の機能を使いこなしていく必要があると感じています。今後は、動的なコンテンツの導入や、より洗練された UI/UX の実現など、この新しい基盤を活かして様々なことに挑戦していきたいと考えています。
96+
97+
これからも The Infinity's をどうぞよろしくお願いいたします！

public/posts/article-2025/04/renewed-with-nextjs/thumbnail.png renamed to public/article-2025/04/renewed-with-nextjs/thumbnail.png

File renamed without changes.

‎public/posts/article-2025/04/renewed-with-nextjs/article.md‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎src/app/[article_year]/[month]/[aid]/page.css‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
@import "tailwindcss";
2+
3+
html {
4+
scroll-behavior: smooth;
5+
}
6+
7+
.article-container {
8+
display: flex;
9+
gap: 20px;
10+
flex-wrap: wrap;
11+
overflow-x: hidden auto;
12+
min-height: 100vh;
13+
/* スマートフォン対応 */
14+
}
15+
16+
.toc {
17+
flex: 1;
18+
top: 64px;
19+
left: 0;
20+
max-height: calc(100vh - 128px);
21+
overflow-y: auto;
22+
overflow-x: hidden;
23+
border: 2px solid var(--primary);
24+
padding: 16px;
25+
border-radius: 8px;
26+
background-color: var(--background);
27+
min-width: 250px;
28+
/* 最小幅を設定 */
29+
}
30+
31+
.toc h2 {
32+
font-size: 1.25rem;
33+
margin-bottom: 8px;
34+
}
35+
36+
.toc ul {
37+
list-style: none;
38+
padding: 0;
39+
}
40+
41+
.toc li {
42+
margin-bottom: 8px;
43+
}
44+
45+
.toc a {
46+
text-decoration: none;
47+
color: var(--link-color);
48+
cursor: pointer;
49+
}
50+
51+
.toc a:hover {
52+
text-decoration: underline;
53+
}
54+
55+
.article-detail {
56+
flex: 3;
57+
min-width: 300px;
58+
/* 最小幅を設定 */
59+
}
60+
61+
.article-thumbnail {
62+
width: 100%;
63+
height: auto;
64+
border-radius: 8px;
65+
margin-bottom: 16px;
66+
}
67+
68+
.article-content {
69+
line-height: 2;
70+
padding: 1rem;
71+
}
72+
73+
.article-content pre {
74+
padding: 1em;
75+
border: 1px solid var(--foreground);
76+
max-width: 100vw;
77+
margin: 10px;
78+
overflow: scroll;
79+
color: var(--foreground);
80+
background-color: var(--background);
81+
font-family: monospace;
82+
83+
}
84+
85+
.article-content h1,
86+
.article-content h2,
87+
.article-content h3,
88+
.article-content h4 {
89+
line-height: 2;
90+
padding-left: 10px;
91+
margin: 10px 0 20px -5px;
92+
border-radius: 10px 5px 5px 10px;
93+
border-left: 15px solid;
94+
animation: article-h-borders 5s linear infinite;
95+
}
96+
97+
.article-content h1[id],
98+
.article-content h2[id],
99+
.article-content h3[id],
100+
.article-content h4[id],
101+
.article-content h5[id],
102+
.article-content h6[id] {
103+
scroll-margin-top: 64px;
104+
/* 固定ヘッダーの高さに応じて調整 */
105+
}
106+
107+
.article-content h5,
108+
.article-content h6,
109+
.article-content p {
110+
font-weight: 500;
111+
}
112+
113+
.article-content h1::before,
114+
.article-content h2::before,
115+
.article-content h3::before,
116+
.article-content h4::before,
117+
.article-content h1::after,
118+
.article-content h2::after,
119+
.article-content h3::after,
120+
.article-content h4::after {
121+
background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) 0 / 200%;
122+
content: "";
123+
display: block;
124+
width: calc(100% + 12px);
125+
border-radius: 5px;
126+
height: 3px;
127+
position: relative;
128+
left: -11px;
129+
animation: border-back-animation linear 5s infinite;
130+
}
131+
132+
@keyframes article-h-borders {
133+
0% {
134+
border-left: 15px solid #f00;
135+
border-right: 4px solid #0ff;
136+
}
137+
138+
17% {
139+
border-left: 15px solid #ff0;
140+
border-right: 4px solid #00f;
141+
}
142+
143+
33% {
144+
border-left: 15px solid #0f0;
145+
border-right: 4px solid #f0f;
146+
}
147+
148+
50% {
149+
border-left: 15px solid #0ff;
150+
border-right: 4px solid #f00;
151+
}
152+
153+
67% {
154+
border-left: 15px solid #00f;
155+
border-right: 4px solid #ff0;
156+
}
157+
158+
83% {
159+
border-left: 15px solid #f0f;
160+
border-right: 4px solid #0f0;
161+
}
162+
163+
100% {
164+
border-left: 15px solid #f00;
165+
border-right: 4px solid #0ff;
166+
}
167+
}
168+
169+
@keyframes border-back-animation {
170+
0% {
171+
background-position-x: 0%;
172+
}
173+
174+
100% {
175+
background-position-x: 200%;
176+
}
177+
}
178+
179+
.other-articles {
180+
margin-top: 40px;
181+
top: 20px;
182+
/* スクロール時に追従 */
183+
}
184+
185+
.other-articles h2 {
186+
font-size: 1.5rem;
187+
margin-bottom: 16px;
188+
}
189+
190+
.other-articles ul {
191+
list-style: none;
192+
padding: 0;
193+
}
194+
195+
.other-articles li {
196+
margin-bottom: 8px;
197+
}
198+
199+
.other-articles a {
200+
text-decoration: none;
201+
color: var(--link-color);
202+
}
203+
204+
.other-articles a:hover {
205+
text-decoration: underline;
206+
}
207+
208+
/* スマートフォン対応 */
209+
@media (max-width: 768px) {
210+
.article-container {
211+
flex-direction: column;
212+
/* 縦並びに変更 */
213+
}
214+
215+
.toc {
216+
position: relative;
217+
/* stickyを無効化 */
218+
max-height: none;
219+
margin-bottom: 20px;
220+
order: -1;
221+
/* 記事の上部に配置 */
222+
}
223+
224+
.other-articles {
225+
position: relative;
226+
/* stickyを無効化 */
227+
top: auto;
228+
margin-top: 20px;
229+
/* 記事の下部に配置 */
230+
}
231+
}

0 commit comments

Comments
 (0)