Cài đặt - tạo project nextjs kết hợp typescript

Nếu bạn chưa biết nextjs là gì thì nó có tên cún cơm là nextjs. Và đôi khi ng đời còn gọi nó với 1 cái tên khác là .... nextjs ( vẫn thế mà thôi 😄 )

Sau một thời gian làm việc với ReactJS với Client Side Rendering (CSR) thì mình thấy khá bất tiện, từ đó mình mò ra có cái nextjs giúp khắc phục cho mình phần login session, SEO và nhiều thứ khác.  NextJS - một framework cho chúng ta thực hiện SSR với ReactJS

Ưu điểm Nextjs.

Dễ thấy nextjs sẽ có 2 ưu điểm là: 

• Hiệu năng tốt hơn so với ứng dujgn CSR
• Mang lại khả năng SEO tốt hơn mà CSR không có như là việc chia sẻ bài viết.

Cài đặt ứng dụng nextjs với typescript

Để tạo một ứng dụng NextJS với Typescript chúng ta sẽ sữ dụng create-next-app:

npx create-next-app nextjs-typescript-demo --ts

hoặc sử dụng yarn: 

yarn create next-app --typescript

Chúng ta sẽ được một project tương tự như trên.

NextJS cung cấp 4 script tương ứng với mỗi giai đoạn phát triển của project:

• dev: Run `next dev` để run app trong development mode
• build: Run `next build` để run app trong production mode
• start: Run `next start` để bắt đầu chạy ứng dụng trên server
• lint: Run `next lint` để thiết lập cấu hình ESLint trong config

Cấu trúc folder

1. Pages

NextJS được xây dựng xung quanh khái niệm page. Tất cả các trang được xây dựng trong một React Component được exported trong một file tsx trong thư mục pages. Pages sẽ được route dựa trên filename. 

2. Public

Thường được để file tĩnh như hình ảnh...

3. Styles

Chứa các global css file.

Cách sử dụng Scss - Sass module trong next

Bước 1:Cài đặt Sass trong ứng dụng Next.js

Mặc dù Next.js có hỗ trợ CSS Module tốt, nhưng nó không đi kèm với Sass tích hợp sẵn. Chúng ta phải cài như sau:

yarn add sass

Bước 2: import fileSass vào ứng dụng Next.js

Để bạn sử dụng bất kỳ tính năng cụ thể nào của Sass, chúng ta sẽ cần sử dụng file Sass có đuôi .sass hoặc .scss. Nên bạn sẽ tạo 1 file tên : Home.module.scss

touch Home.module.scss

nội dung code của file bạn có thể xài theo ý bạn muốn. Mình ví dụ nhập code scss như sau:

$color-primary: #0070f3;	
.title {
  color: $color-primary;
}

Vào file .../pages/index.tsx sửa lại dòng : import styles from '../styles/Home.module.css' thành import styles from '../styles/Home.module.scss'.  Cuối cùng bạn sửa lại chỗ style.container thành styles.title. Ví dụ: 

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'

const Home: NextPage = () => {
  return <div className={styles.title}>Trang chu </div>
}

export default Home

start lại terminal và kết quả : 

Chúc các bạn thành công!