×

Cài đặt thư viện Next.js trong JavaScript

Avatar of admin
admin 1 Views

Next.js là một khung làm việc (framework) được xây dựng trên React.js, giúp việc phát triển ứng dụng web trở nên dễ dàng và nhanh chóng hơn. Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt thư viện Next.js trong JavaScript và khám phá các tính năng nổi bật của nó.

1. Giới thiệu về Next.js

Next.js là gì?

Next.js là một framework JavaScript, được xây dựng dựa trên React, cho phép các nhà phát triển tạo ra các ứng dụng web tĩnh và động. Nó giúp tăng tốc độ phát triển, cải thiện hiệu suất, và dễ dàng triển khai ứng dụng trên các máy chủ.

Tại sao nên sử dụng Next.js?

Có nhiều lý do khiến Next.js trở thành sự lựa chọn hàng đầu của nhiều nhà phát triển:

  • Server-side rendering (SSR): Cải thiện SEO và hiệu suất tải trang.
  • Static site generation (SSG): Tạo các trang tĩnh với hiệu suất cao.
  • Automatic code splitting: Tối ưu hóa việc tải mã nguồn bằng cách chỉ tải những phần cần thiết.
  • API routes: Tạo các API endpoint ngay trong ứng dụng Next.js.
  • Built-in CSS and Sass support: Hỗ trợ tích hợp CSS và Sass một cách dễ dàng.

2. Yêu cầu trước khi cài đặt Next.js

Trước khi bắt đầu, bạn cần đảm bảo rằng máy tính của bạn đã cài đặt Node.js và npm (Node Package Manager) hoặc yarn. Nếu chưa có, bạn có thể tải và cài đặt từ trang chủ Node.js: https://nodejs.org/.

Kiểm tra cài đặt Node.js và npm

Mở terminal hoặc command prompt và chạy các lệnh sau để kiểm tra phiên bản Node.js và npm:

node -v
npm -v

Nếu bạn thấy phiên bản hiển thị, nghĩa là cả hai đã được cài đặt thành công.

3. Khởi động dự án Next.js mới

Sử dụng create-next-app

Công cụ create-next-app được sử dụng để tạo một dự án Next.js mới một cách nhanh chóng và dễ dàng. Chạy lệnh sau trong terminal:

npx create-next-app my-next-app

Trong đó, my-next-app là tên của dự án. Sau khi chạy lệnh, công cụ sẽ tạo ra một cấu trúc thư mục như sau:

my-next-app/
  ├─ node_modules/
  ├─ public/
  ├─ styles/
  ├─ pages/
  ├─ .gitignore
  ├─ package.json
  ├─ README.md

Cài đặt thủ công

Nếu bạn muốn cài đặt Next.js thủ công, hãy làm theo các bước sau:

  1. Tạo thư mục dự án:
mkdir my-next-app
cd my-next-app
  1. Khởi tạo dự án npm:
npm init -y
  1. Cài đặt Next.js và React:
npm install next react react-dom
  1. Thêm các script vào file package.json:
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

4. Cấu trúc thư mục và tệp tin trong Next.js

Thư mục pages

Thư mục pages là nơi bạn tạo ra các trang của ứng dụng Next.js. Mỗi tệp trong thư mục này tương ứng với một URL trong ứng dụng của bạn.

  • index.js: Trang chính của ứng dụng (tương ứng với URL /).
  • about.js: Trang about (tương ứng với URL /about).

Thư mục public

Thư mục public chứa các tài nguyên tĩnh (hình ảnh, tệp tin, v.v.) mà bạn muốn sử dụng trong ứng dụng của mình. Các tệp tin trong thư mục này có thể được truy cập trực tiếp thông qua URL của chúng.

Thư mục styles

Thư mục styles chứa các tệp tin CSS hoặc Sass để bạn có thể quản lý và áp dụng kiểu dáng cho ứng dụng của mình một cách dễ dàng.

5. Khởi chạy ứng dụng Next.js

Sau khi đã tạo dự án và cấu hình ban đầu, bạn có thể khởi chạy ứng dụng bằng lệnh sau:

npm run dev

Ứng dụng sẽ chạy ở chế độ phát triển và bạn có thể truy cập vào địa chỉ http://localhost:3000 để xem kết quả.

6. Phát triển ứng dụng với Next.js

Tạo trang mới

Tạo một tệp tin mới trong thư mục pages, ví dụ: contact.js, với nội dung như sau:

import React from 'react';

const Contact = () => {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>This is the contact page.</p>
    </div>
  );
};

export default Contact;

Truy cập vào http://localhost:3000/contact để xem trang mới.

Điều hướng giữa các trang

Next.js cung cấp component Link để điều hướng giữa các trang mà không cần tải lại trang. Dưới đây là ví dụ trong index.js:

import React from 'react';
import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  );
};

export default Home;

Sử dụng API Routes

Next.js cho phép bạn tạo các API endpoint một cách dễ dàng. Tạo một tệp tin mới trong thư mục pages/api, ví dụ: hello.js, với nội dung như sau:

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello, Next.js!' });
}

Truy cập vào http://localhost:3000/api/hello để xem kết quả JSON.

Kết hợp CSS và Sass

Next.js hỗ trợ tích hợp CSS và Sass một cách dễ dàng. Để sử dụng CSS:

  • Tạo một tệp tin CSS, ví dụ: styles/globals.css với nội dung:
body {
  font-family: Arial, sans-serif;
}
  • Import tệp tin CSS vào pages/_app.js:
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Tạo trang động bằng getStaticPaths và getStaticProps

Next.js cung cấp các hàm getStaticPaths và getStaticProps để tạo các trang động thông qua Static Site Generation (SSG). Dưới đây là ví dụ tạo trang động dựa trên ID bài viết:

Tạo file [id].js trong thư mục pages/posts:

import React from 'react';
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  const paths = [{ params: { id: '1' } }, { params: { id: '2' } }]; // Ví dụ cho các ID
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return { props: { post: { id: params.id, content: `Content for post ${params.id}` } } };
}

const Post = ({ post }) => {
  return (
    <div>
      <h1>Post {post.id}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

Truy cập vào http://localhost:3000/posts/1 hoặc http://localhost:3000/posts/2 để xem các trang động.

7. Triển khai ứng dụng Next.js

Sau khi hoàn thiện ứng dụng của mình, bạn có thể triển khai nó trên nhiều nền tảng khác nhau như Vercel, Netlify, hoặc một máy chủ Node.js.

Triển khai trên Vercel

Vercel là nền tảng của chính nhóm phát triển Next.js, cung cấp công cụ tốt nhất để triển khai ứng dụng Next.js. Các bước triển khai trên Vercel như sau:

  1. Đăng nhập vào Vercel tại https://vercel.com/.
  2. Kết nối với tài khoản GitHub hoặc GitLab của bạn.
  3. Chọn dự án Next.js cần triển khai và làm theo hướng dẫn để hoàn tất.

Triển khai trên máy chủ Node.js

Nếu bạn muốn triển khai ứng dụng Next.js trên một máy chủ Node.js:

  1. Build ứng dụng:
npm run build
  1. Khởi động ứng dụng:
npm run start
  1. Triển khai mã nguồn và ứng dụng trên máy chủ của bạn giống như triển khai một ứng dụng Node.js thông thường.

Kết luận

Next.js là một framework mạnh mẽ giúp việc phát triển và triển khai ứng dụng web trở nên dễ dàng hơn. Hi vọng bài viết này đã giúp bạn hiểu rõ cách cài đặt và bắt đầu với Next.js. Chúc bạn thành công với các dự án web của mình!

Comments

Bài viết liên quan