đồng thời cung cấp nhiều tính năng tiên tiến như Server-Side Rendering (SSR). Static Site Generation (SSG), code splitting và hot reloading.
Ngoài ra, Next.js cũng hỗ trợ nhiều thư viện và công nghệ phổ biến trong cộng đồng React, như Redux, TypeScript, styled-components và nhiều hơn nữa.
Với các tính năng và lợi ích mà nó mang lại, Next.js đã trở thành một lựa chọn phổ biến cho các ứng dụng web React của các công ty lớn và nhỏ trên toàn thế giới.
Ví dụ đơn giản về dùng Next Js để tạo ứng dụng blog
Để minh họa cho việc sử dụng Next.js để xây dựng ứng dụng Blog, chúng ta có thể làm theo các bước sau:
1.Tạo một project Next.js mới:
npx create-next-app my-blog
2.Cài đặt các dependencies cần thiết:
3.Tạo một file index.js trong thư mục pages với nội dung như sau:
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
export default <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> Home({ posts }) {
return (
<div>
{posts.map((post) => (
<div key={post.slug}>
<h2><span class="ez-toc-section" id="postfrontmattertitle"></span>{post.frontmatter.title}<span class="ez-toc-section-end"></span></h2>
<p>{post.frontmatter.date}</p>
<ReactMarkdown>{post.content}</ReactMarkdown>
</div>
))}
</div>
)
}
export <a href="https://nodemy.vn/di-sau-vao-async-await-trong-javascript-huong-dan-tu-co-ban-den-nang-cao-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">async</a> function getStaticProps() {
const files = fs.readdirSync(path.join('posts'))
const posts = files.map((filename) => {
const slug = filename.replace('.md', '')
const markdownWithMetadata = fs.readFileSync(
path.join('posts', filename),
'utf-8'
)
const { data: frontmatter, content } = matter(markdownWithMetadata)
return {
slug,
frontmatter,
content,
}
})
return {
props: {
posts,
},
}
}
5.Chạy ứng dụng bằng cách chạy lệnh:
npm run dev
Sau đó, bạn có thể truy cập vào http://localhost:3000 để xem kết quả.
Với ví dụ đơn giản này, chúng ta đã có thể tạo ra một trang Blog đơn giản bằng cách sử dụng Next.js, Markdown và các thư viện hỗ trợ.
Kết luận và bài viết có liên quan
Bài viết có liên quan: Hướng dẫn tạo ứng dụng realtime với Socket và Next.js. cho người mới ( important ) Next Js là gì? và Next Js có phải React Js? ( cái nào quan trọng hơn )
