Next.js - Hỗ trợ CSS toàn cầu
Trong Next.js, Hãy tạo kiểu toàn cục sẽ được áp dụng trên tất cả các trang.
Trong ví dụ này, chúng tôi sẽ tạo một styles.css sẽ được sử dụng trên tất cả các thành phần sử dụng thành phần _app.js.
Hãy cập nhật dự án nextjs được sử dụng trong chương Hỗ trợ CSS .
Đầu tiên tạo một thư mục kiểu ở cấp cơ sở và thêm tệp styles.css như sau:
html,
body {
padding: 0;
margin: 0;
line-height: 1.6;
font-size: 18px;
background-color: lime;
}
* {
box-sizing: border-box;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
display: block;
}
Tạo tệp _app.js trong thư mục trang
import '../styles/styles.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
Khởi động Máy chủ Next.js
Chạy lệnh sau để khởi động máy chủ -.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
Xác minh đầu ra
Mở localhost: 3000 trong trình duyệt và bạn sẽ thấy kết quả sau.
Nhấp vào liên kết bài đăng đầu tiên.