---
title: "Tạo layout trong NextJS"
description: "Layout là một cái khung để chứa các component trong app"
date: "2021-06-14"
author:
  name: "Nguyen Pham"
  role: "Xin chào. Mình thích lập trình và công nghệ. Đây là blog mình chia sẻ lại các kiến thức về lập trình, công nghệ."
  avatar: "http://0.gravatar.com/avatar/6fb61398e24046b34e13870dd6c357b9?s=128&d=mm&r=g"
category: "Programming"
tags: ["Programming"]
coverImage: "/blog/covers/tao-layout-trong-nextjs.png"
featured: false
readingTime: "1 min read"
---

# Layout trong NextJS

- Layout là một cái khung để chứa các component trong app

![](https://2k1.org/wp-content/uploads/2021/06/image-1-1024x556.png)

Bắt đầu nào 😉

`_app.js`

```
function MyApp({ Component, pageProps }) {
  const Layout = Component.Layout || (({ children }) => <>{children}</>);
  return (
    <Layout>
      <Component {...pageProps} />;
    </Layout>
  );
}

export default MyApp;
```

`components/[layoutxxx].js`

```
export default function Te({ children }) {
  return (
    <div className="bg-blue-700">
      <h1 className="text-3xl text-gray-600">Layout</h1>
      <div>{children}</div>
    </div>
  );
}
```

`page/[pagexxxx].js`

```
import Te from "components/layouts/Te.js";
function Test() {
  return (
    <>
      <h1 className="text-6xl ml-40 relative ">Hello</h1>
    </>
  );
}
Test.Layout = Te;
export default Test;

// layout for page
```

## Chú ý

thư mục layout phải ở trong folder component. Nếu đang sử dụng Tailwind CSS (Vẫn có thể để chỗ khác những phải tuỳ chỉnh lại config)

Restart lại server nếu Layout không hiện

### Tham khảo

[Learn | Next.js](https://nextjs.org/learn/basics/assets-metadata-css/layout-component)