Organize app using Next.js route groups

This commit is contained in:
adilallo
2026-02-06 21:59:43 -07:00
parent aa7364769e
commit 51990ca149
11 changed files with 28 additions and 28 deletions
@@ -5,7 +5,7 @@ import RuleCard from "../components/cards/RuleCard";
import Chip from "../components/controls/Chip"; import Chip from "../components/controls/Chip";
import MultiSelect from "../components/controls/MultiSelect"; import MultiSelect from "../components/controls/MultiSelect";
import Image from "next/image"; import Image from "next/image";
import { getAssetPath } from "../../lib/assetUtils"; import { getAssetPath } from "../../../lib/assetUtils";
interface ChipData { interface ChipData {
id: string; id: string;
@@ -5,16 +5,16 @@ import {
getBlogPostBySlug, getBlogPostBySlug,
getAllBlogPosts as getAllPosts, getAllBlogPosts as getAllPosts,
type BlogPost, type BlogPost,
} from "../../../lib/content"; } from "../../../../lib/content";
import { logger } from "../../../lib/logger"; import { logger } from "../../../../lib/logger";
import ContentBanner from "../../components/sections/ContentBanner"; import ContentBanner from "../../../components/sections/ContentBanner";
import AskOrganizer from "../../components/sections/AskOrganizer"; import AskOrganizer from "../../../components/sections/AskOrganizer";
import { getAssetPath, ASSETS } from "../../../lib/assetUtils"; import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import "../blog.css"; import "../blog.css";
// Code split RelatedArticles - blog-specific, below the fold // Code split RelatedArticles - blog-specific, below the fold
const RelatedArticles = dynamic( const RelatedArticles = dynamic(
() => import("../../components/sections/RelatedArticles"), () => import("../../../components/sections/RelatedArticles"),
{ {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" /> <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
@@ -1,5 +1,5 @@
import { getAllBlogPosts } from "../../lib/content"; import { getAllBlogPosts } from "../../../lib/content";
import ContentThumbnailTemplate from "../components/content/ContentThumbnailTemplate"; import ContentThumbnailTemplate from "../../../components/content/ContentThumbnailTemplate";
import type { Metadata } from "next"; import type { Metadata } from "next";
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -1,9 +1,9 @@
import messages from "../../messages/en/index"; import messages from "../../../messages/en/index";
import { getTranslation } from "../../lib/i18n/getTranslation"; import { getTranslation } from "../../../lib/i18n/getTranslation";
import ContentThumbnailTemplate from "../components/content/ContentThumbnailTemplate"; import ContentThumbnailTemplate from "../../../components/content/ContentThumbnailTemplate";
import ContentLockup from "../components/type/ContentLockup"; import ContentLockup from "../../../components/type/ContentLockup";
import AskOrganizer from "../components/sections/AskOrganizer"; import AskOrganizer from "../../../components/sections/AskOrganizer";
import { getAllBlogPosts } from "../../lib/content"; import { getAllBlogPosts } from "../../../lib/content";
export default function LearnPage() { export default function LearnPage() {
// Get real blog posts from the content system // Get real blog posts from the content system
+9 -9
View File
@@ -1,39 +1,39 @@
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import messages from "../messages/en/index"; import messages from "../../messages/en/index";
import { getTranslation } from "../lib/i18n/getTranslation"; import { getTranslation } from "../../lib/i18n/getTranslation";
import HeroBanner from "./components/sections/HeroBanner"; import HeroBanner from "../components/sections/HeroBanner";
import AskOrganizer from "./components/sections/AskOrganizer"; import AskOrganizer from "../components/sections/AskOrganizer";
// Code split below-the-fold components to reduce initial bundle size // Code split below-the-fold components to reduce initial bundle size
const LogoWall = dynamic(() => import("./components/sections/LogoWall"), { const LogoWall = dynamic(() => import("../components/sections/LogoWall"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[200px]" /> <section className="py-[var(--spacing-scale-032)] min-h-[200px]" />
), ),
ssr: true, ssr: true,
}); });
const NumberedCards = dynamic(() => import("./components/sections/NumberedCards"), { const NumberedCards = dynamic(() => import("../components/sections/NumberedCards"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[300px]" /> <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
), ),
ssr: true, ssr: true,
}); });
const RuleStack = dynamic(() => import("./components/sections/RuleStack"), { const RuleStack = dynamic(() => import("../components/sections/RuleStack"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" /> <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
), ),
ssr: true, ssr: true,
}); });
const FeatureGrid = dynamic(() => import("./components/sections/FeatureGrid"), { const FeatureGrid = dynamic(() => import("../components/sections/FeatureGrid"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[500px]" /> <section className="py-[var(--spacing-scale-032)] min-h-[500px]" />
), ),
ssr: true, ssr: true,
}); });
const QuoteBlock = dynamic(() => import("./components/sections/QuoteBlock"), { const QuoteBlock = dynamic(() => import("../components/sections/QuoteBlock"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[300px]" /> <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
), ),
+1 -1
View File
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
import { screen, waitFor } from "@testing-library/react"; import { screen, waitFor } from "@testing-library/react";
import { renderWithProviders as render } from "../utils/test-utils"; import { renderWithProviders as render } from "../utils/test-utils";
import React from "react"; import React from "react";
import BlogPostPage from "../../app/blog/[slug]/page"; import BlogPostPage from "../../app/(marketing)/blog/[slug]/page";
// Mock Next.js components // Mock Next.js components
vi.mock("next/navigation", () => ({ vi.mock("next/navigation", () => ({
+1 -1
View File
@@ -4,7 +4,7 @@ import {
screen, screen,
waitFor, waitFor,
} from "../utils/test-utils"; } from "../utils/test-utils";
import Page from "../../app/page"; import Page from "../../app/(marketing)/page";
describe("Page", () => { describe("Page", () => {
test("renders all main sections", async () => { test("renders all main sections", async () => {
+1 -1
View File
@@ -7,7 +7,7 @@ import {
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { vi, describe, test, expect, afterEach } from "vitest"; import { vi, describe, test, expect, afterEach } from "vitest";
import React from "react"; import React from "react";
import Page from "../../app/page"; import Page from "../../app/(marketing)/page";
// Mock next/dynamic to return components synchronously in tests // Mock next/dynamic to return components synchronously in tests
vi.mock("next/dynamic", () => { vi.mock("next/dynamic", () => {
+1 -1
View File
@@ -7,7 +7,7 @@ import {
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { vi, describe, test, expect, afterEach } from "vitest"; import { vi, describe, test, expect, afterEach } from "vitest";
import React from "react"; import React from "react";
import Page from "../../app/page"; import Page from "../../app/(marketing)/page";
// Mock next/dynamic to return components synchronously in tests // Mock next/dynamic to return components synchronously in tests
vi.mock("next/dynamic", () => { vi.mock("next/dynamic", () => {