How to integrate with the new layout?

rogerhnn commented 1 year ago

Hello, thanks for creating this package!

I wonder how I should integrate this with the new layout.js that replaced the _app.js file.

Also, it's possible to translate the contents of the metadata too?

Can you point me the directions?

The default layout.js:

import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Thank you!

xairoo commented 1 year ago

Hi!

I haven't noticed a change about the layout, can you please link me the source? Anyway, why don't use _app.js?

Also you can use many different layouts, just import them on the page you want to have it.

I always do:

import Head from "next/head";
import SomeLayout from "../layouts";
import { useTranslation } from "next-i18next-static-site";

export default function Page() {
  const { t } = useTranslation();

  return (
    <>
      <Head>
        <title>{`${t("title", { ns: "meta" })}`}</title>
      </Head>
      <SomeLayout maybeSpecialMeta="foobar" anotherMeta={t("magic"}>
        <div>Foobar</div>
      <SomeLayout />
    </>
  );
}

Cheers

rogerhnn commented 1 year ago

Hello xairoo

https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration

I haven't noticed a change about the layout, can you please link me the source? Anyway, why don't use _app.js?

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required

And here is the part that I didn't fully understand how to integrate with, because now we need a required Root Layout.

xairoo commented 1 year ago

Oh yeah I have noticed that, but that's so long ago!

I didn't saw a real benefit right now. Also we use SSG (static site generated while build, not while user request). Means that you don't have dynamic created content for e.g. on user data on the server side at each request.

All dynamic content is done client side, like when the user is logged in and the API returns the username that should be displayed or super complex graphs that will be get fresh data from the API with a HTTP request or even through WebSocket.

https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#upgrading-new-features

Next.js 13 introduced the new App Router with new features and conventions. The new Router is available in the app directory and co-exists with the pages directory.

Upgrading to Next.js 13 does not require using the new App Router. You can continue using pages with new features that work in both directories, such as the updated Image component, Link component, Script component, and Font optimization.

I am playing around with this right now but don't have too much time for this. Also they don't provide an example, all examples still have the _app thing (pages instead of app). I guess "required" is a really bad chosen word?

Why do you want to use root layout? Perhaps I don't see all.

xairoo commented 1 year ago

I have tested a few things, but for now I'll stay with the old layout which works really great and it won't be removed in the near future, maybe never. Next.js still has to fix many things like to get useEffect() work with generateStaticParams() and so on. Running a website without the use of useEffect() really feels like 1990 or so.

Also nice:

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

But yeah, you can use i18n with the root layout, but I ran into content mismatch errors while in dev but they are gone in the production build. But this is crazy, I have written next-i18next-static-site to prevent such annoying errors while in dev.

cozarkd commented 8 months ago

I'm interested in using App Router with this too. I started learning Next.js with App directory and seems weird to learn something they don't want to promote. I've tested other solutions but no luck for now.

Did you tested this since then?

xairoo / next-i18next-static-site

How to integrate with the new layout? #5