Next.js
TIL
720
White

mòe viết ngày 20/05/2019

Cài

như trong https://nextjs.org/learn/basics

npm init -y
npm install --save react react-dom next
npm run dev

then

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

hoặc

git clone https://github.com/zeit/next-learn-demo.git
npm install
npm run dev

Cũng tự cập nhật ko cần reload, gọi là Webpack's hot module replacement

Không biết có giống cái hot loading của Gatsby hay Angular ko.

pages/index.js
thêm 1 file js là thêm 1 page

link the pages
nếu dùng <a> thì thành server side routing nên dùng Link component của next/link
Khi mà nó nói Add the following code into pages/index.js thì có nghĩa là xoá hết đi paste lại chứ ko phải add
vì chỉ có thể export 1 lần

components
thư mục chứa component thích đặt tên thư mục là gì cũng đc
chỉ có thư mục pages phải đặt đúng là pages. Bên trong thư mục pages thì các trang .js có direct link, ngoài thư mục pages thì các components ko có direct link.
---> cho thư mục components vào trong thư mục pages cũng được nhưng ko cần vì ko cần direct link cho Header component

component Link

client-side routing

  <Link href="/about">

Thành phần 1 file .js trong pages hay là bất kì comp nào trong thư mục comp

trong pages

import component cần thiết

import Abc from '../abc/abc.js'

export default (để convert ra html?)

export default function Index() {
  return (
     <div></div>
  )
}

Trong components

import component cần thiết

import Link from 'next/link'

có thể đưa css

Lưu class css vào const cho dễ dùng

const abcDef = {
  marginRight: 15
}

nội dung chính

const Xyz = () => (
    <p style={abcDef}>Home</p>
   )

export cho thằng khác dùng

export default 
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

mòe

14 bài viết.
328 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
100 44
google cách học tốt tiếng anh thì ra hàng đống kết quả nhưng đảm bảo không có cái nào dùng được (nếu dùng được thì bạn đã tiến bộ rồi phải không). ...
mòe viết hơn 1 năm trước
100 44
White
42 10
(Ảnh) Dùng CSS để "sửa" nội dung HTML Ngoài nguyên nhân là muốn chơi nổi thì lí do phải dùng code CSS để tác động vào HTML là khi bạn không được ...
mòe viết 9 tháng trước
42 10
White
31 15
Bài này sẽ hướng dẫn tạo theme Wordpress mà không sử dụng gì. Gồm 5 phần với thứ tự như sau: Tạo theme tĩnh, Các khái niệm dễ gây nhầm lẫn trong Wo...
mòe viết 7 tháng trước
31 15
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
White
22 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 3 năm trước
22 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
328 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!