nextjs-analyzer
Version:
A modular tool that comprehensively analyzes Next.js projects. Includes component, performance, security, SEO, data fetching, code quality, and historical analysis features.
1,206 lines (1,200 loc) • 119 kB
HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next.js Analiz Sonuçları</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #0070f3;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #0070f3;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
margin-top: 40px;
}
.module-container {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.module-title {
font-size: 1.5em;
margin-bottom: 15px;
color: #0070f3;
}
.module-description {
font-style: italic;
margin-bottom: 20px;
color: #666;
}
.module-content {
margin-top: 20px;
}
.tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.tab {
padding: 10px 20px;
cursor: pointer;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-bottom: none;
margin-right: 5px;
border-radius: 5px 5px 0 0;
}
.tab.active {
background-color: #0070f3;
color: white;
border-color: #0070f3;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.metadata {
background-color: #f0f8ff;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}
.metadata-title {
font-weight: bold;
margin-bottom: 5px;
}
.metadata-item {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Next.js Analiz Sonuçları</h1>
<div class="tabs">
<div class="tab active" onclick="openTab(event, 'code-quality')">code-quality</div><div class="tab" onclick="openTab(event, 'component')">component</div><div class="tab" onclick="openTab(event, 'data-fetching')">data-fetching</div><div class="tab" onclick="openTab(event, 'history')">history</div><div class="tab" onclick="openTab(event, 'performance')">performance</div><div class="tab" onclick="openTab(event, 'routing')">routing</div><div class="tab" onclick="openTab(event, 'security')">security</div><div class="tab" onclick="openTab(event, 'seo')">seo</div><div class="tab" onclick="openTab(event, 'visualization')">visualization</div>
</div>
<div id="code-quality" class="tab-content active">
<div class="module-container">
<div class="module-title">code-quality</div>
<div class="module-description">Checks code quality and best practices</div>
<div class="metadata">
<div class="metadata-title">Metadata:</div>
<div class="metadata-item"><strong>totalComponents:</strong> 27</div>
<div class="metadata-item"><strong>unusedComponentCount:</strong> 12</div>
</div>
<div class="module-content">
<div class="code-quality-container">
<h2>Unused Components</h2>
<ul class="unused-components-list">
<li class="unused-component">
<span class="file-path">src\app\error.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\hakkimizda\page.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\iletisim\page.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\layout.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\loading.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\not-found.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\page.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\urunler\page.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\urunler\[urun-kategorisi]\page.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\yazilar\page.js</span>
</li>
<li class="unused-component">
<span class="file-path">src\app\yazilar\[slug]\page.js</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="component" class="tab-content">
<div class="module-container">
<div class="module-title">component</div>
<div class="module-description">Analyzes server and client components in Next.js projects</div>
<div class="metadata">
<div class="metadata-title">Metadata:</div>
<div class="metadata-item"><strong>totalComponents:</strong> 27</div>
<div class="metadata-item"><strong>serverComponents:</strong> 23</div>
<div class="metadata-item"><strong>clientComponents:</strong> 4</div>
</div>
<div class="module-content">
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next.js Component Analizi</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #0070f3;
text-align: center;
margin-bottom: 30px;
}
.tree {
margin-left: 20px;
}
.tree-item {
margin: 5px 0;
}
.tree-container {
margin-bottom: 40px;
}
.client {
color: #ff6b6b;
font-weight: bold;
}
.server {
color: #38b000;
font-weight: bold;
}
.file-name {
font-weight: bold;
}
.imports-container {
margin-top: 5px;
margin-left: 20px;
font-size: 0.9em;
color: #666;
}
.imports-title {
font-weight: bold;
margin-top: 5px;
}
.imports-list {
margin: 0;
padding-left: 20px;
}
.collapsible {
cursor: pointer;
user-select: none;
}
.collapsible::before {
content: '▶';
display: inline-block;
margin-right: 5px;
transition: transform 0.3s;
}
.active::before {
transform: rotate(90deg);
}
.content {
display: none;
overflow: hidden;
}
.show {
display: block;
}
</style>
</head>
<body>
<h1>Next.js Component Analizi</h1>
<div class="tree-container">
<h2>📁 app/</h2>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\error.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\ErrorMain.js (<span class="client">Client Component</span>)</li>
<li>src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</li>
<li>src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\ErrorMain.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\not-found.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
<li>src\app\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\layout.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\hakkimizda\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\AboutMain.js (<span class="server">Server Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\AboutMain.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\iletisim\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\ContactMain.js (<span class="server">Server Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\ContactMain.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\iletisim\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\layout.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\layout.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\loading.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\shared\others\Preloader.js (<span class="server">Server Component</span>)</li>
<li>src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</li>
<li>src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\others\Preloader.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\loading.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
<li>src\app\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\layout.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\not-found.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\ErrorMain.js (<span class="client">Client Component</span>)</li>
<li>src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</li>
<li>src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\ErrorMain.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\not-found.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
<li>src\app\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\wrappers\PageWrapper.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\layout.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\Home9Mani.js (<span class="server">Server Component</span>)</li>
<li>src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\Home9Mani.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\shared\others\ThemeController.js (<span class="client">Client Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\error.js</li>
<li>src\app\loading.js</li>
<li>src\app\not-found.js</li>
<li>src\app\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\urunler\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\ShopMain.js (<span class="server">Server Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\ShopMain.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\urunler\[urun-kategorisi]\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\ShopMain.js (<span class="server">Server Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\ShopMain.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\ProductDetailsMain.js (<span class="server">Server Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\ProductDetailsMain.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\yazilar\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\BlogsMain.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\BlogsMain.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\app\yazilar\[slug]\page.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imports:</div>
<ul class="imports-list">
<li>src\components\layout\main\BlogDetailsMain.js (<span class="server">Server Component</span>)</li>
<li>src\fetch\fetchle.js (<span class="server">Server Component</span>)</li>
<li>src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</li>
<li>src\libs\helpers.js (<span class="server">Server Component</span>)</li>
<li>src\libs\ogSeo.js (<span class="server">Server Component</span>)</li>
</ul>
</div>
<div class="tree">
<div class="tree-item">
<span class="collapsible file-name">📄 src\components\layout\main\BlogDetailsMain.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\fetch\fetchle.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\layout.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\GenerateSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\helpers.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\yazilar\[slug]\page.js</li>
</ul>
</div>
</div>
</div>
<div class="tree-item">
<span class="collapsible file-name">📄 src\libs\ogSeo.js (<span class="server">Server Component</span>)</span>
<div class="content">
<div class="imports-container">
<div class="imports-title">Imported By:</div>
<ul class="imports-list">
<li>src\app\hakkimizda\page.js</li>
<li>src\app\iletisim\page.js</li>
<li>src\app\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\[urun-slug]\page.js</li>
<li>src\app\urunler\[urun-kategorisi]\page.js</li>
<li>src\app\urunler\page.js</li>
<li>src\app\yazilar\[slug]\page.js</li>
<li>src\app\yazilar\page.js</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Collapsible sections
const coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
const content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
</div>
</div>
</div>
<div id="data-fetching" class="tab-content">
<div class="module-container">
<div class="module-title">data-fetching</div>
<div class="module-description">Analyzes data fetching methods and strategies</div>
<div class="metadata">
<div class="metadata-title">Metadata:</div>
<div class="metadata-item"><strong>totalFilesAnalyzed:</strong> 27</div>
<div class="metadata-item"><strong>getServerSidePropsCount:</strong> 0</div>
<div class="metadata-item"><strong>getStaticPropsCount:</strong> 0</div>
<div class="metadata-item"><strong>getStaticPathsCount:</strong> 0</div>
<div class="metadata-item"><strong>swrCount:</strong> 0</div>
<div class="metadata-item"><strong>reactQueryCount:</strong> 0</div>
<div class="metadata-item"><strong>fetchCount:</strong> 1</div>
<div class="metadata-item"><strong>axiosCount:</strong> 0</div>
</div>
<div class="module-content">
<div class="data-fetching-container">
<h2>Data Fetching Analysis</h2>
<!-- Veri Fetching Yöntemleri -->
<div class="section">
<h3>Data Fetching Methods</h3>
</div>
<!-- Client-side Veri Fetching -->
<div class="section">
<h3>Client-side Data Fetching</h3>
<div class="subsection">
<h4>Fetch API</h4>
<ul class="method-list">
<li class="method-item">
<div class="method-file">src\fetch\fetchle.js</div>
<div class="method-detail warning">Cache: Not Specified</div>
<div class="method-recommendation">Recommendation: Add cache strategy to fetch request: { cache: "force-cache" } or { cache: "no-store" }</div>
</li>
</ul>
</div>
</div>
<!-- Cache Stratejileri -->
<div class="section">
<h3>Cache Strategies</h3>
<div class="subsection">
<h4>Detected Issues</h4>
<ul class="issue-list">
<li class="issue-item">
<div class="issue-file">src\fetch\fetchle.js</div>
<div class="issue-description">Issue: Using fetch API without specifying cache strategy</div>
<div class="issue-recommendation">Recommendation: Add cache strategy to fetch request: { cache: "force-cache" } or { cache: "no-store" }</div>
</li>
</ul>
</div>
<div class="subsection">
<h4>General Recommendations</h4>
<ul class="recommendation-list">
<li class="recommendation-item">
<div class="recommendation-title">Data Fetching with App Router</div>
<div class="recommendation-description">If you're using App Router, you can fetch data with React Server Components. This reduces client-side JavaScript and improves SEO.</div>
</li>
<li class="recommendation-item">
<div class="recommendation-title">Using SWR or React Query</div>
<div class="recommendation-description">Use SWR or React Query for client-side data fetching. These libraries automatically provide features like caching, revalidation, error handling.</div>
</li>
<li class="recommendation-item">
<div class="recommendation-title">Incremental Static Regeneration (ISR)</div>
<div class="recommendation-description">Use ISR with getStaticProps for data that doesn't change frequently. This allows static pages to be regenerated at specific intervals.</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="history" class="tab-content">
<div class="module-contai