Layout Component question

[2ynhub]

Hi, I don't know anything about react and javascript. I am just following https://nextjs.org/learn/basics/.
In this article https://nextjs.org/learn/basics/assets-metadata-css/layout-component

Is it correct that layout.js needs to be changed from

function Layout({ children }) {
  return <div>{children}</div>
}

export default Layout

to

import styles from './layout.module.css'

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>
}

?

[IamLizu]

Actually both of them are correct. Yes, let me explain.

1. A simple component, renders children.
2. Renders children but also imports a css module named layout.module.css which contains the stylesheet for the layout component. Imported as styles, layout.module.css can be used throughout the module. So here, styles.container means .container class of module layout.module.css.

Another difference is in the fist component, it was created first then exported. But on the second one, it was declared to export initially. You can do either one. But make sure to export the main function (i.e. Layout) as default.

[2ynhub]

I meant not modifying first-post.js or anything but just layout.js. I mean at the article they made me to make layout.js and fill it wi first codes. Then, I changed first-post.js to import layout and created layout.module.css. Finally, I changed the content of layout.js to later code. When I tried removing the content of layout.js after I included importing layout in first-post.js, I got error. So, what I am saying is how about not creating the layout.js with first code and create layout.module.css and make layout.js with later code and change the first-post.js?

https://nextjs.org/learn/basics/assets-metadata-css/global-styles This article also creates _app.js and change the content.

Thank you for your reply. :)

[IamLizu]

I request to follow the tutorial according, if you do, you will not see any error. Yes, the tutorial makes you change files and how they look over time, step by step. It's all about helping you understand thoroughly.