Panziewanz
Panziewanz
PostsComments
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
Holy F***. I feel so dumn, thank you.
19 replies
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
yes. heres the branch I'm working on.https://github.com/L-Steinmacher/next-blog/tree/app-router
19 replies
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
I deleted the .next dir and ran build again, heres the error: 
  Creating an optimized production build  
   Linting and checking validity of types  ...Failed to compile.

src/app/about/page.tsx
Type error: Page "src/app/about/page.tsx" does not match the required types of a Next.js Page.
  "metaData" is not a valid Page export field.
   Linting and checking validity of types  .%                                      
  Creating an optimized production build  
   Linting and checking validity of types  ...Failed to compile.

src/app/about/page.tsx
Type error: Page "src/app/about/page.tsx" does not match the required types of a Next.js Page.
  "metaData" is not a valid Page export field.
   Linting and checking validity of types  .%
The first file is the page, yes. I'm sorry I dont' follow your suggestion, "This is what i would do... about/layout and about/page. and root layout would be src/app/layout. and see if that helps"
19 replies
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
"next": "^13.5.5"
19 replies
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
the metadata is all stuctured as above.
19 replies
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
No. The layout is server. I'm attempting to migrate my app from the pages to the app router and running into some strange behavior. I may give it another 2-6 months before attempting this again. I'm having issues with the metadata durring build now as well. I don't know what changed but the title was rendering on the browser tab and no longer is. I'm getting this type error 
Type error: Page "src/app/about/page.tsx" does not match the required types of a Next.js Page.
  "metaData" is not a valid Page export field.
Type error: Page "src/app/about/page.tsx" does not match the required types of a Next.js Page.
  "metaData" is not a valid Page export field.
19 replies
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
layout: 
import '~/styles/globals.css';
import '~/styles/footnote.css';
import { type Metadata } from 'next';
import Layout from '~/app/pageLayout';
import { TRPCReactProvider } from '~/trpc/react';
import { headers } from 'next/headers';

export const metaData: Metadata = {
    title: 'title',
    description: 'stuff'
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                <TRPCReactProvider headers={headers()}>
                    <Layout>{children}</Layout>
                </TRPCReactProvider>
            </body>
        </html>
    );
}
import '~/styles/globals.css';
import '~/styles/footnote.css';
import { type Metadata } from 'next';
import Layout from '~/app/pageLayout';
import { TRPCReactProvider } from '~/trpc/react';
import { headers } from 'next/headers';

export const metaData: Metadata = {
    title: 'title',
    description: 'stuff'
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                <TRPCReactProvider headers={headers()}>
                    <Layout>{children}</Layout>
                </TRPCReactProvider>
            </body>
        </html>
    );
}
19 replies
TTCTheo's Typesafe Cult
Created by Panziewanz on 10/16/2023 in #questions
Server page being recognized as a Client component
Here's the component for reference. 
import Link from 'next/link';
import { type Metadata } from 'next';
import { type NonNullablePostOptions } from '~/interfaces/post';
import { getPostBySlug, getPostSlugs } from 'lib/blogApi';
import markdownToHtml from 'lib/markdownToHtml';
import PostBody from '~/components/postBody';
import readingTime from 'reading-time';
import { CommentLayout } from '~/app/blog/[slug]/commentLayout';

export async function getPost(slug: string) {
    // ... calling getPostBySlug which utilizes fs to fetch content in md
}

export async function generateStaticParams() {
    // ...
}

export async function generateMetadata({
    params,
}: {
    params: { slug: string };
}): Promise<Metadata> {
   // ...
    return {
        title: postData.title,
        description: postData.excerpt,
    };
}

export default async function Post({
    params: { slug },
}: {
    params: { slug: string };
}) {
    const { post, stats } = await getPost(slug);

    return (
        <>
            // ...
                <CommentLayout slug={post.slug} />
            // ...
        </>
    );
}
import Link from 'next/link';
import { type Metadata } from 'next';
import { type NonNullablePostOptions } from '~/interfaces/post';
import { getPostBySlug, getPostSlugs } from 'lib/blogApi';
import markdownToHtml from 'lib/markdownToHtml';
import PostBody from '~/components/postBody';
import readingTime from 'reading-time';
import { CommentLayout } from '~/app/blog/[slug]/commentLayout';

export async function getPost(slug: string) {
    // ... calling getPostBySlug which utilizes fs to fetch content in md
}

export async function generateStaticParams() {
    // ...
}

export async function generateMetadata({
    params,
}: {
    params: { slug: string };
}): Promise<Metadata> {
   // ...
    return {
        title: postData.title,
        description: postData.excerpt,
    };
}

export default async function Post({
    params: { slug },
}: {
    params: { slug: string };
}) {
    const { post, stats } = await getPost(slug);

    return (
        <>
            // ...
                <CommentLayout slug={post.slug} />
            // ...
        </>
    );
}
19 replies