Thu nhập có thể coi là vấn đề được quan tâm hàng đầu của các bạn trẻ sau khi ra trường và cả khi trên ghế nhà trường hay chuẩn bị chọn trường. Điều này xuất phát từ nhiều lý do như sức ép tự nuôi sống bản thân, sức ép từ gia đình, phấn đấu – ganh đua với bạn bè… Coi trọng mức lương không hề xấu, nhưng nếu quá quan tâm đến “lương”, rất có thể sẽ khiến bạn mất đi nhiều cơ hội khác.Rất nhiều bài báo, trang web, trung tâm và thậm chí hội thảo nói nhiều về vấn đề lương của lập trình viên, thu nhập của từng nhóm nghề CNTT lên tới vài nghìn đô. Vậy sự thực là như thế nào?Bài viết dưới đây thể hiện góc nhìn và hiểu biết cá nhân và kinh nghiệm của mình đã từng làm tổng cộng 7 năm ở FPT Software, 3 lần tham gia công ty startup và kinh nghiệm phỏng vấn 12 công ty phần mềm khác nhau<h3 class="ql-align-justify">1. Lương, lương và lương</h3>Dễ hiểu, lương là khoản tiền bạn nhận được hàng tháng cho kết quả công việc của bạn. Về cơ bản, công ty sử dụng sức lao động của bạn để kiếm lợi nhuận cho công ty. Do đó, nếu bạn càng kiếm đc nhiều cho công ty đồng nghĩa với giá trị của bạn lớn, thì lương của bạn càng cao. Tuy nhiên, về vấn đề lương, hãy thực sự để ý tới những điều sau - vấn đề mà cực nhiều bạn ko biết, đó là:<ul><li class="ql-align-justify">Nhiều công ty (ví dụ công ty nước ngoài) trả 1 năm có 13 tháng lương. Nhiều công ty trả 1 năm có 13 tháng kèm thêm thưởng tết. Do đó, ko nên so sánh lương, hãy so sánh thu nhập 1 năm.</li><li class="ql-align-justify">Ví dụ lương 10M * 13 thì ko bằng lương 8M*13 + thưởng 30M</li><li class="ql-align-justify">Hãy so sánh lương theo giờ. Ví dụ, bạn làm 8 tiếng/ngày đc lương 10m thì ko cao bằng bạn làm 5 tiếng/ngày mà nhận 7m</li><li class="ql-align-justify">Lương ko đồng đều, cân bằng giữa các vùng miền, quốc gia. Lấy ví dụ lương nếu bạn làm Nhật là 60m (3000$), nhưng thuê nhà mất 10m, ăn hết 200k/bữa thì cũng tương tự như ở VN nhận lương 10m, thuê nhà 2m và ăn hết 30k/bữa mà thôi. Ngay trong Việt Nam, mức chi tiêu ở Đà Nẵng cũng không cao như Hà Nội và Thành phố Hồ Chí Minh. Do đó, mức lương nếu bạn làm việc ở Đà Nẵng cũng ko cao bằng ở Thành phố HCM và Hà Nội. Theo 1 số thống kê và hiểu biết của mình, lương ở Thành phố HCM cao hơn ở Hà Nội từ 1.2 tới 1.5 lần</li><li class="ql-align-justify">Ngoài lương còn các giá trị khác. Ví dụ nếu bạn tham gia công ty startup. Lương chỉ là X và bạn nhận đc Y% cổ phần. Nếu công ty thành công, Y% cổ phần mang lại cho bạn 1 số tiền khá lớn. Cái này chính là việc bạn đầu tư 1 phần lương vào sự thành công của công ty, ko đo đếm được</li><li class="ql-align-justify">Hãy tính lương trong 1 khoảng thời gian dài hơn 1 năm. Ví dụ làm 5 năm liên tục, lương vẫn giữ nguyên hoặc thay đổi ko đáng kể. Điều đó không so sánh được với việc bạn vào những công ty có lương khởi điểm thấp, nhưng tỉ lệ tăng lương hàng năm cao (ví dụ 20%, 30%)</li><li class="ql-align-justify">Có những công việc mang tính ngắn hạn lương sẽ cao hơn bình thường. Ví dụ công việc chỉ cần làm gấp trong 1 năm (do đang thiếu người), bạn sẽ nhận được lương cao hơn bình thường 1.5 lần. Nếu đang cần tiền, bạn có thể cày. Ngược lại, đây chưa chắc đã phải là một lựa chọn tốt</li></ul>.....Đây chỉ là 1 số lưu ý đơn giản, để chúng ta hiểu rằng, con số to và cao chưa chắc đã là “giỏi”. Bạn cần so sánh, tính toán (thiên về số học, tỉ suất) rất nhiều để biết thực sự bạn đang được trả lương như thế nào.<h3 class="ql-align-justify">2. Lương bao nhiêu là hợp lý?</h3>Với hiểu biết của mình, lương hợp lý là như thế này:<ul><li class="ql-align-justify">Nếu làm việc ở 1 công ty việt nam, chủ quản là người Việt Nam thì hệ số là 1. Công ty có trụ sở ở Việt Nam nhưng vốn nước ngoài hệ số là 1.2-1.5 (cao hơn công ty kia 1 .2 tới 1.5 lần). Trường hợp bạn làm từ xa với công ty nước ngoài thì hệ số cũng là 1.3 cho tới 2. Bạn sang nước ngoài làm việc thì hệ số có thể cao hơn (từ 2-5 tuỳ quốc gia, Sing:2-3, Nhật: 3-5, ...). Do đó, đừng so lương của 1 thằng đang làm ở Mỹ hay Nhật so với Việt Nam. Vì 1 cốc nước của nó cũng mua đắt hơn cốc nước của bạn chục lần ý chứ.</li><li class="ql-align-justify">Lương tuỳ vào trình độ và số năm kn làm việc. Mình đang đưa ra khoảng lương ở cty thuần VN (hệ số là 1 như sau)</li><li class="ql-align-justify">+ 0-1 năm kinh nghiệm: 5 - 10M (lập trình viên)</li><li class="ql-align-justify">+ 1-3 năm kinh nghiệm: 12 - 24M (junior developer)</li><li class="ql-align-justify">+ 3-5 năm kinh nghiệm: 20 - 35M (senior developer)</li><li class="ql-align-justify">+ &gt;5 năm kinh nghiệm: 30M - 100M (tuỳ thuộc trình độ, nhóm nghề, khả năng, nhóm này có dao động lớn)</li></ul>Do đó, những bài báo nói về việc lương 3000$ là hoàn toàn hợp lý. Một là bạn có nhiều năm kinh nghiệm và có kĩ năng. Hai là bạn làm ở những công ty vốn nước ngoài hoặc làm ở nước ngoàiCó 1 điều chắc chắn: nếu bạn mới ra trường và làm ở Việt Nam, thì đạt mức lương 1000$ đã là rất cao thủ rồi đó<h3 class="ql-align-justify">3. Học gì để lương cao?</h3>Như nói ở trên, lương cao là do bạn. Nếu bạn có kỹ năng, bạn làm được nhiều tiền cho công ty, thì lương của bạn cao. Nó giống như 1 cuộc mua bán, thứ trao đổi là sức lao động và tri thức của bạn<ul><li class="ql-align-justify">Nếu làm việc với công ty nước ngoài, chắc chắn bạn cần ngoại ngữ. Làm việc với Nhật thì học tiếng Nhật, còn lại đa số bạn cần tiếng Anh. Singapore yêu cầu tiếng Anh thấp hơn Mỹ 1 chút.</li><li class="ql-align-justify">Dưới 2 năm kinh nghiệm, do kinh nghiệm của bạn ít, các công ty cần bạn nắm chắc kiến thức cơ bản (chiếm 70% trọng số), nhiều năm kinh nghiệm hơn thì kiến thức cơ bản chỉ chiếm 20-30% trọng số. Kiến thức cơ bản gồm:&nbsp;lập trình hướng đối tượng,<a href="https://codelearn.io/blog/view/thuat-toan-la-gi-hoc-thuat-toan-lam-quai-gi" rel="noopener noreferrer" target="_blank" style="background-color: transparent;">thuật toán</a></li><li class="ql-align-justify">,&nbsp;database,&nbsp;design pattern,&nbsp;mạng máy tính.</li><li class="ql-align-justify">Trên 2 năm kinh nghiệm, bạn cần có kỹ năng chuyên môn và kinh nghiệm làm việc liên quan. Ví dụ làm frontend thì biết về frontend, làm database thì biết nhiều về Database. Nhiều công ty cần bạn biết thiết kế, kiến trúc.</li></ul>Nếu muốn lương cao, bên cạnh kỹ năng cứng, kỹ năng mềm cũng rất quan trọng. Dưới 2 năm kinh nghiệm, bạn cần nói năng lưu loát, làm việc nhóm tốt, trình bày mạch lạc. Cao hơn, bạn cần biết ít nhiều về quản lý, phân tích yêu cầu, quản lý thời gian, làm kế hoạch, thuyết trình, ...<h3 class="ql-align-justify">Tạm kết</h3>Nếu lương/thu nhập đang là vấn đề bạn quan tâm số 1, thì bên trên chỉ là một số lưu ý giúp bạn định giá và so sánh lương của mình. Điều quan trọng hơn cả, đó là, sau vài năm, bạn nhận ra rằng, lương hay tiền không phải là tất cả. Ngoài lương, còn có rất nhiều những yếu tố phụ khác khiến bạn có thể khiến bạn có tinh thần để làm việc lâu dài và kéo dài được tuổi thọ của nghề IT – cái nghề vốn rất khô khan và bạc bẽo này. Đó là yếu tố như văn hóa công ty, quan hệ đồng nghiệp, đời sống tinh thần được công ty chăm sóc ra sao. Yếu tố quan trọng hơn cả, mà bạn nên cân nhắc – so với tiền- lương, đó là tương lai, là cơ hội mà bạn có được sau cả quá trình làm việc.Và điều tôi muốn nói rằng, bạn sẽ không thể sống cả đời và giàu bằng lương. Hãy chọn cho mình 1 mục tiêu dài hạn, và kế hoạch cho từng giai đoạn trong sự nghiệp của mình.

Lập Trình Viên Lương 3000 Đô? Sự Thật Hay Giả Dối

8 ý tưởng thu nhập phụ cho lập trình viên

Nhắc đến những ngành nghề hot hit với mức lương hấp dẫn, chắc chắn phải kể đến lập trình viên. Tuy nhiên, để trở nên chuyên nghiệp, bạn cần phải có những&nbsp;kỹ năng lập trình&nbsp;căn bản.Vậy những kỹ năng đó là gì? Làm thế nào để có được? Tìm hiểu ngay câu câu trả lời trong bài viết dưới đây nhé!<h2>Lập trình viên là gì?&nbsp;</h2>Lập trình viên ( <a href="https://glints.com/vn/blog/developer-la-gi/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; font-weight: var(--bs-body-font-weight); color: rgb(0, 123, 255); display: inline !important;">Develop Software</a> ) là người làm việc với các chương trình trên máy tính, bao gồm các công việc như xây dựng, thiết kế, sửa lỗi và bảo trì.Công việc của một lập trình viên gắn liền với các bộ mã và&nbsp;<a href="https://glints.com/vn/blog/ban-can-hoc-bao-nhieu-ngon-ngu-lap-trinh-de-tro-thanh-developer/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; font-weight: var(--bs-body-font-weight); color: rgb(0, 123, 255); display: inline !important;">ngôn ngữ</a> riêng của máy tính, có thể kể đến như Flutter, Swift hay Java, v.v.<img src="https://glints.com/vn/blog/wp-content/uploads/2022/06/lap-trinh-can-ky-nang-tu-hoc.jpg" alt="kỹ năng lập trình là gì" height="375" width="500">Nghề lập trình viên là công việc gì?&nbsp;Lập trình viên hiện nay đang là một trong những ngành nghề được nhiều bạn trẻ ưa chuộng nhất. Bởi nó gắn liền với các công nghệ kỹ thuật số hiện đại, ngoài ra còn có mức lương vô cùng hấp dẫn và khả năng phát triển cao.<h2>Để hiểu thêm về nghề lập trình viên cũng như lộ trình thăng tiến của nghề này, bạn nên tìm hiểu thêm về <a href="https://glints.com/vn/blog/co-bao-nhieu-level-cho-mot-lap-trinh-vien/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; font-weight: var(--bs-body-font-weight); color: rgb(0, 123, 255); display: inline !important;">các cấp bậc của lập trình viên</a>, từ đó hiểu rõ từng bước trong quá trình phát triển sự nghiệp.Các kỹ năng lập trình cần có ở một lập trình viên&nbsp;</h2>Để trở thành một lập trình viên chuyên nghiệp và được nhiều người tin tưởng, kỹ năng là một trong những yếu tố quan trọng vô cùng. Dưới đây một số các&nbsp;kỹ năng lập trình&nbsp;bạn cần rèn luyện hàng ngày để trở nên thuần thục:<h3>Kỹ năng về JavaScript</h3>Một trong những ngôn ngữ lập trình hàng đầu xây dựng nên các web hiện nay chính là JavaScript.Với sự đa dạng về nền tàng và thư viện, các nhà tuyển dụng luôn ưu tiên hơn những người thành thạo kỹ năng này. Không hề ngoa khi nói hiểu biết Javascript thì sẽ không lo thất nghiệp.<h3>JavaScript đã thể hiện thế mạnh của mình trên rất nhiều lĩnh vực như website, mobile hay desktop. Do đó, thành thạo kỹ năng này là bạn đã đủ khả năng làm chủ rất nhiều các chương trình khó nhằn và hóc búa.Kỹ năng về an toàn bảo mật</h3>Bảo mật là yếu tố hàng đầu được các công ty lớn quan tâm, bởi các lỗ hổng bảo mật luôn có khả năng tạo nên những “điểm chết”. Đó chính là lý do tại sao các lập trình viên giỏi về bảo mật và các biện pháp an ninh mạng luôn được các tập đoàn lớn tin tưởng và trọng dụng.<img src="https://glints.com/vn/blog/wp-content/uploads/2022/06/ky-nang-lap-trinh-bao-mat.jpg" alt="kỹ năng lập trình bảo mật" height="333" width="500">Nắm được các kỹ năng về bảo mật thông tin là lợi thế của một lập trình viênHiện nay, những người chuyên về bảo mật đã được tách ra thành một ngành riêng là chuyên gia an ninh mạng.Tuy nhiên, điều này không có nghĩa là kỹ năng này không cần thiết. Hiểu và thành thục kỹ năng an toàn bảo mật là bạn đã có một điểm cộng vô cùng lớn khi tiếp xúc và làm việc cùng các đối tác quan trọng.<h3>Kỹ năng làm việc với data</h3>Dữ liệu dạng số đang ngày càng trở nên phổ biến hơn trong xã hội hiện đại. Do đó, kỹ năng làm việc với dữ liệu, đặc biệt là các dữ liệu khổng lồ (big data) rất quan trọng nếu bạn muốn phát triển trong nghề lập trình viên.Nhu cầu xử lý, phân tích và tổng hợp các dữ liệu trong doanh nghiệp chưa bao giờ có dấu hiệu giảm nhiệt.Không chỉ phải nắm chắc các kiến thức về dữ liệu dạng số, bạn còn phải biết cách chuyển giao thành những dạng chương trình khác nhau trên nhiều thiết bị máy học.<h3>Kỹ năng bên mảng di động</h3>Lập trình viên không chỉ làm việc với máy tính, đặc biệt là khi nền tảng di động đang ngày một phát triển. Nhu cầu xử lý ứng dụng, kết nối website ngay trên điện thoại cũng theo đó được quan tâm nhiều hơn.Vì vậy, nếu muốn trở nên chuyên nghiệp, bạn không thể nào thiếu đi kỹ năng truy cập và thao tác trên di động.Đây là một kỹ năng dài hạn, nghĩa là phải thực hiện hàng ngày, thường xuyên thì mới có thể thành thục được.<h3>Kỹ năng về điện toán đám mây</h3>Dù đã xuất hiện từ lâu, điện toán đám mây vẫn được rất nhiều người dùng ưa chuộng, trong đó có cả những công ty lớn.Đám mây cho phép các doanh nghiệp phát triển, tìm kiếm cơ hội và tiếp xúc với các đối tác có tiềm năng. Do vậy, không có gì lạ khi họ tìm đến các lập trình viên có kỹ năng xử lý điện toán đám mây có chuyên môn cao.<h3>Kỹ năng thuyết trình</h3>Bạn cần phải biết cách truyền đạt ngắn gọn và súc tích sao cho khách hàng hoặc các nhân viên trong công ty của mình hiểu một cách trọn vẹn.Nếu bạn đang là một newbie, thì&nbsp;kỹ năng thuyết trình được nhận định là <a href="https://glints.com/vn/blog/ky-nang-mem-la-gi/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; font-weight: var(--bs-body-font-weight); color: rgb(0, 123, 255); display: inline !important;">kỹ năng mề</a>m quan trọng nhất.<h3>Khả năng giải quyết vấn đề</h3>Công việc của một lập trình viên sẽ xoay quanh xử lý các chương trình. Vì vậy, giải quyết vấn đề nhanh nhạy với tư duy cao và sự nhạy bén là một điều vô cùng quan trọng.Đây cũng là kỹ năng hàng đầu tạo nên sự tin tưởng khi bạn làm việc cùng với các đối tác lớn. qĐọc thêm:&nbsp;<a href="https://glints.com/vn/blog/ky-nang-giai-quyet-van-de-la-gi/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; color: rgb(0, 123, 255);">Kỹ Năng Giải Quyết Vấn Đề Và Ra Quyết Định Chỉ Với 6 Bước 6 Kỹ Năng</a><h3>Khả năng tự tìm tòi, tự học</h3>Thực tế, lập trình viên là một ngành yêu cầu những bộ óc lớn và những người có IQ cao. Bởi không có giáo trình nào dạy cho bạn tất cả những thứ bạn phải làm.Bên cạnh kiến thức nền tảng được học, bạn cần vận dụng khả năng của mình để tự tìm tòi và học hỏi. Xã hội 4.0 phát triển không ngừng, một lập trình viên chuyên nghiệp chắc chắn phải là người nhanh nhẹn và nhạy bén.<img src="https://glints.com/vn/blog/wp-content/uploads/2022/06/ky-nang-lap-trinh.jpg" alt="kỹ năng tự tìm tòi lập trình" width="500">Muốn trở thành lập trình viên giỏi, bạn cần phải tự tìm tòi<h3>Khả năng đọc hiểu lỗi thông báo</h3>Nếu bạn không hiểu lỗi chương trình là gì, chắc chắn bạn sẽ không thể tìm ra được phương pháp sửa lỗi cho đúng.Kỹ năng này còn cần thiết để bạn tìm ra cách sửa chữa và bảo trì nhanh nhất. Điều này thể hiện được sự chuyên nghiệp của bản thân khi làm việc.<h3>Khả năng giao tiếp, làm việc nhóm</h3>Nhiều người vẫn lầm tưởng lập trình viên chỉ làm việc một mình. Tuy nhiên, điều này là không đúng.Để được vào làm trong các công ty hay tập đoàn lập trình lớn, bạn chắc chắn phải biết <a href="https://glints.com/vn/blog/4-cach-cai-thien-ky-nang-lam-viec-nhom-hieu-qua/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; font-weight: var(--bs-body-font-weight); color: rgb(0, 123, 255); display: inline !important;">cách làm việc nhóm</a> và giao tiếp với mọi người ở các phòng ban.<h2>4 Cách nâng tầm kỹ năng lập trình</h2>Kỹ năng lập trình&nbsp;không tự nhiên sinh ra mà có. Nó đòi hỏi một bộ não trí tuệ cùng sự bền bỉ luyện tập theo từng ngày. Nếu bạn đang tìm kiếm cách phát triển kỹ năng của bản thân, hãy tham khảo một vài phương pháp bên dưới:&nbsp;<h3>Tạo thói quen code mỗi ngày</h3>Giống như bất kỳ ngành nghề nào khác, lập trình viên cũng yêu cầu sự luyện tập thường xuyên.Hãy chắc rằng bạn luôn sử dụng mã code của mình hàng ngày, để khi thực hiện chương trình không có bất kỳ lỗi sai nào xảy ra. Ngoài ra, mỗi khi chạy code, bạn cũng đừng quên kiểm tra hiệu quả và chất lượng của nó nhé.<h3>Thực chiến dự án thực tế</h3>Bạn sẽ không thể có được kỹ năng hoàn hảo nếu chỉ học thuộc lòng lý thuyết. Hãy tham gia các dự án thực tế, tiếp xúc nhiều với các đối tác hay phòng ban để nâng cao kỹ năng của mình.Chỉ khi thực hành thì bạn mới biết bản thân còn những thiếu sót gì để nhanh chóng sửa đổi.<h3>Học thêm nhiều ngôn ngữ lập trình khác</h3>Ngôn ngữ máy tính là một phạm trù vô cùng đa dạng. Mỗi chương trình lại gắn với một kiểu loại ngôn ngữ khác nhau.Do đó, bạn không thể chỉ học duy nhất một ngôn ngữ như Python hay JavaScript nếu muốn trở nên chuyên nghiệp. Hãy trau dồi thêm nhiều kiến thức khác nhau. Điều này vô cùng có lợi khi bạn chinh chiến các dự án cho những đối tác khổng lồ.<img src="https://glints.com/vn/blog/wp-content/uploads/2022/06/ky-nang-lap-trinh-da-ngon-ngu.jpg" alt="kỹ năng lập trình đa ngôn ngữ" height="252" width="500">Học càng nhiều ngôn ngữ lập trình càng tốt<h3>Chia sẻ, giảng dạy cho người khác</h3>Kiến thức không chỉ được tiếp thu khi bạn học. Ngược lại, nếu bạn chia sẻ và hướng dẫn cho người khác những kiến thức của mình, bạn có thể hiểu thêm được rất nhiều thứ.<ul><li>Ưu điểm trong cách xây dựng chương trình của người khác.</li><li>Các lỗi sai người khác mắc phải mà bạn cần phải tránh.</li></ul><h2>Kết luận</h2>Trên đây là một số&nbsp;kỹ năng lập trình&nbsp;quan trọng nhất mà một lập trình viên cần phải có.Đi cùng với sự phát triển của thời đại, lập trình viên chắc chắn phải là những người hiện đại và tân tiến nhất. Do vậy, đừng bỏ quên mà hãy tập luyện những kỹ năng trên đây sao cho thật thành thục và chuyên nghiệp nhé.Glints Việt Nam chúc bạn thành công!

10 Kỹ Năng Lập Trình Cần Bổ Sung Để Trở Nên Chuyên Nghiệp

<h2>API Routes</h2>Need a backend / API for your project? No problem.One of the game-changers about Next is how is provides an all-in-one solution for creating full-stack React apps by giving you the ability to write server code using a feature called&nbsp;API routes.To write your backend, add a folder called "api" in /pages to create your own API that are ultimately executed as separate serverless functions.If we wanted to fetch data for our about page from /api/about, we would include a page called about.js in /pages/api:<pre class="ql-syntax" spellcheck="false">// syntax is very similar to the "Express" Node.js framework

// here we are responding to every request with an OK (200) code and sending JSON data back (our name)

export default function handler(req, res) {
 res.status(200).json({ name: "Reed Barger" });
}
</pre><h2>Request Data Client-side</h2>Now that we have an API route, how do we use it?How do we request data from our API routes and use the data in our client pages?The traditional approach would be to request it using&nbsp;<code>useEffect</code>&nbsp;and&nbsp;<code>useState</code>:<pre class="ql-syntax" spellcheck="false">import Link from "next/link";
import { useEffect, useState } from "react";

export default function About() {
 const [data, setData] = useState(null);
 const [isLoading, setLoading] = useState(false);

 useEffect(() =&gt; {
 setLoading(true);
 fetch("api/about")
 .then((res) =&gt; res.json())
 .then((data) =&gt; {
 setData(data);
 setLoading(false);
 });
 }, []);

 if (isLoading) return &lt;p&gt;Loading...&lt;/p&gt;;
 if (!data) return &lt;p&gt;No about data&lt;/p&gt;;

 return (
 &lt;div&gt;
 &lt;h1&gt;My name is: {data.name}&lt;/h1&gt;
 &lt;/div&gt;
 );
}
</pre>This approach works, but requires a lot of boilerplate code. On top of that, it doesn't have the best user experience.While this is a basic example, if we had necessary dynamic info to fetch and display in our pages, we would always show the "Loading" text to our users on every page visit.An improved way to fetch data and catch it upon future visit is to use the library SWR, which is also made by the developers of Next.It gives us a convenient hook&nbsp;<code>useSWR</code>&nbsp;to more easily fetch data and handle loading and errors state, as well as cache data for future visits if nothing has changed. If it has changed, fetch the data in the background while the stale data is shown from the cache.<blockquote>Note: The hook is named after this "cache invalidation" strategy: "stale-while-revalidate"</blockquote>Here is the same request made using SWR:<pre class="ql-syntax" spellcheck="false">import useSWR from "swr";

const fetcher = (...args) =&gt; fetch(...args).then((res) =&gt; res.json())

export default function About() {
 const { data, error } = useSWR("/api/about", fetcher)

 if (error) return &lt;div&gt;Error fetching data&lt;/div&gt;
 if (!data) return &lt;div&gt;Loading...&lt;/div&gt;

 return (
 &lt;div&gt;
 &lt;h1&gt;{data.name}&lt;/h1&gt;
 &lt;/div&gt;
 )
}
</pre><h2>Request Data Server-side</h2>What's an even better way to fetch data in Next that improves user experience and SEO overall?There are two functions that you can include directly within your page files that allow us to fetch data from the server:<blockquote>Yes, these functions are in the same file as our React components, but the code for them is bundled separately from our React client.</blockquote><ol><li><code>getServerSideProps</code></li><li><code>getStaticProps</code></li></ol><h2>GetServerSideProps</h2><code>getServerSideProps</code>&nbsp;runs on every page visit. As a result, it is very helpful on pages with dynamic data or needs requests to be performed every time, such as getting authenticated user data.<pre class="ql-syntax" spellcheck="false">export default function About({ name }) {
 return (
 &lt;div&gt;
 &lt;h1&gt;My name is: {name}&lt;/h1&gt;
 &lt;/div&gt;
 );
}

export function getServerSideProps() {
 return {
 props: { name: "Reed Barger" },
 };
}
</pre>The function does exactly as its name states – it lets us send data from the server and injects it into our page component's props.What is great about this feature is that it allows our React client to display the data immediately, with no delay, plus not have to handle any loading or error state.If we wanted to fetch data from the server, we could do so by making&nbsp;<code>getServerSideProps</code>&nbsp;async using the&nbsp;<code>async</code>&nbsp;keyword.<pre class="ql-syntax" spellcheck="false">export default function About({ name }) {
 return (
 &lt;div&gt;
 &lt;h1&gt;My name is: {name}&lt;/h1&gt;
 &lt;/div&gt;
 );
}

export async function getServerSideProps() {
 const data = await fetch("https://randomuser.me/api").then((res) =&gt;
 res.json()
 );

 return {
 props: { name: data.results[0].name.first },
 };
}
</pre>Here we are dynamically fetching data from the&nbsp;<a href="https://randomuser.me/" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">random user api</a>, and our data changes every time we refresh the page.<h2>GetStaticProps</h2>Let's rename our&nbsp;<code>getServerSideProps</code>&nbsp;function with the name&nbsp;<code>getStaticProps</code>.Again, the function does what its name says. Or does it?<code>getStaticProps</code>&nbsp;is a function that is more appropriate for more static pages that change less frequently. This function executes our server code and makes a GET request on the server, but it only does so once when our project is built.When you run the app in development, however, it seems to request data every time we refresh the page like&nbsp;<code>getServerSideProps</code>.It's important to note that&nbsp;<code>getStaticProps</code>&nbsp;only makes requests on every page visit during development.If you run&nbsp;<code>yarn build</code>&nbsp;and then run the production build or your React project using&nbsp;<code>yarn start</code>, you will see that no matter how many times we refresh, we keep getting the same name – the name that was requested when the project was built and not at runtime.<img src="https://www.freecodecamp.org/news/content/images/2022/01/Screen-Shot-2022-01-14-at-3.59.19-PM.png" alt="Screen-Shot-2022-01-14-at-3.59.19-PM" height="168" width="522">Sample result requested from getStaticPropsYou might be asking at this point:&nbsp;"Why use API routes at all with these two functions?"It's important to be aware of the fact that both&nbsp;<code>getServerSideProps</code>&nbsp;and&nbsp;<code>getStaticProps</code>&nbsp;can only perform GET requests. API routes can handle any type of request to read and update data (that is when combined with a data layer like a database)<h2>Where to Learn Next.js</h2>What we've covered here just scratches the surface of Next, but you've already gained everything you need to start using Next in your React projects today.If you want a more in-depth and technical guide, the official site has an&nbsp;<a href="https://nextjs.org/learn/basics/create-nextjs-app" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">interactive course</a>&nbsp;on how to learn Next.js from the ground up.<img src="https://www.freecodecamp.org/news/content/images/2022/01/Screen-Shot-2022-01-14-at-12.05.33-PM.png" alt="Screen-Shot-2022-01-14-at-12.05.33-PM" height="1082" width="2028">The (free) Next.js Learn Course<h2>Become a Professional React Developer</h2>React is hard. You shouldn't have to figure it out yourself.I've put everything I know about React into a single course, to help you reach your goals in record time:<a href="https://www.thereactbootcamp.com/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; color: var(--gray85);">Introducing: The React Bootcamp</a>It’s the one course I wish I had when I started learning React.Click below to try the React Bootcamp for yourself:<a href="https://www.thereactbootcamp.com/" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;"><img src="https://reedbarger.nyc3.digitaloceanspaces.com/reactbootcamp/react-bootcamp-cta-alt.png" alt="Click to join the React Bootcamp" height="394" width="1105"></a>

Get Started with Next.js – The React Library Your Project Needs(2)

I've composed this guide to give you a practical overview of perhaps the most important React library you will use to build 90% of your projects: Next.js.The goal of this tutorial is to get you started using Next.js as easily as possible.This is not a complete guide on Next, but it will give you everything you need to understand:<ul><li>What Next.js is (and why you should start using it for your React projects)</li><li>How to perform essential tasks using Next.js</li><li>Plus how Next.js will help you build overall better React applications, faster</li></ul>Let's dive in!<h2>Table of Contents</h2><ul><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#what-is-next-js" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">What is Next.js?</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#what-features-next-js-gives-you" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">What Features Next.js Gives You</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#what-features-next-js-doesn-t-have" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">What Features Next.js Doesn't Have</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#how-to-create-a-next-js-app" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">How to Create a Next.js App</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#next-js-scripts" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Next.js Scripts</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#add-typescript-to-next-js" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Add TypeScript to Next.js</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#pages-and-routes" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Pages and Routes</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#links-and-navigation" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Links and Navigation</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#seo-in-next-js" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">SEO in Next.js</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#api-routes" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">API Routes</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#request-data-client-side" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Request Data Client-side</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#request-data-server-side" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Request Data Server-side</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#getserversideprops" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">GetServerSideProps</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#getstaticprops" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">GetStaticProps</a></li><li><a href="https://www.freecodecamp.org/news/nextjs-tutorial/#where-to-learn-next-js" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Where to Learn Next.js</a></li></ul><h2>What is Next.js?</h2>The ultimate tool for any React developer to learn and improve their own projects is, without a doubt,&nbsp;Next.js.<img src="https://www.freecodecamp.org/news/content/images/2022/01/Screen-Shot-2022-01-14-at-12.12.20-PM.png" alt="Screen-Shot-2022-01-14-at-12.12.20-PM" height="932" width="2000">The NextJS.org HomepageWhether I'm building a static site with interactivity like a blog, or a highly dynamic, full-stack project like a social media app,&nbsp;I almost always reach for Next.The first reason for you to use Next is, as the banner headline states, because it's a&nbsp;React framework.Think of it as a "batteries-included" way to build your React applications, which gives you the simplicity of tools like Create React App, combined with a suite of other super powerful features.Despite being a framework, Next.js keeps some of the React philosophy of being unopinionated. Next gives you features to improve your overall development experience but doesn't constrain the amount of options you can choose from.In fact, given what Next makes possible for React apps, I would contend that it has really expanded the number of options available to you, if you need it.You can get a more complete sense of everything Next.js apps are capable of by checking 100s of example Next.js projects at&nbsp;<a href="https://nextjs.org/examples" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">nextjs.org/examples</a>:<img src="https://www.freecodecamp.org/news/content/images/2022/01/Screen-Shot-2022-01-14-at-1.56.57-PM.png" alt="Screen-Shot-2022-01-14-at-1.56.57-PM" height="1385" width="2000">Next.js ExamplesThere you can find examples on how to create the following Next (React) apps:<ul><li>A blog using Markdown / MDX or Wordpress</li><li>An e-commerce app using Shopify</li><li>A site using content management systems like Contentful or Sanity</li><li>A full-stack project with GraphQL and Authentication</li></ul>And tons more! Be sure to check out the full list to spark your imagination.<h2>What Features Next.js Gives You</h2>Below is a shortlist of what Next gives your React projects.In short, it provides the functionality of an entire suite of packages within a single&nbsp;<code>next</code>&nbsp;dependency.Next.js gives you:<ul><li>Page-based routing (create a page by putting components in /pages)</li><li>A built-in router (no need to install React Router)</li><li>API routes (write backend code using Node.js in /pages/api)</li><li>Super fast builds for development / production (see saved changes instantly)</li><li>Image and font optimization</li><li>Built-in ESLint and TypeScript support</li><li>+ tons more (all outlined in the&nbsp;</li><li><a href="https://nextjs.org/docs/" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">Next.js documentation</a></li><li>)</li></ul><h2>What Features Next.js Doesn't Have</h2>Additionally there are many essential things that Next.js does not provide out of the box.For example, there is no built-in way to do the following in Next:<ul><li>Authentication (I recommend using the package Next-Auth)</li><li>Testing (I recommend using Playwright or Cypress for your E2E tests)</li><li>State management (I recommend Zustand or Redux Toolkit)</li></ul><a href="https://nextjs.org/docs/authentication" rel="noopener noreferrer" target="_blank" style="color: var(--gray90); background-color: transparent;">The documentation itself</a>&nbsp;covers these shortcomings, but it is important to note that while Next.js gives you a great deal&nbsp;it will not alone cover every app use-case.<h2>Next.js Speedrun 💨</h2>I'll give you the highlights of Next.js to give you a sense of how the framework gives you great defaults that make you more productive.<h2>How to Create a Next.js App</h2>If you have NPM installed, start any new Next project with the command:<pre class="ql-syntax" spellcheck="false">npx create-next-app my-next-project
</pre><code>create-next-app</code>&nbsp;is a package like Create React App, but for Next.js projects.In short, it gives us a Next project with all its dependencies installed (which are&nbsp;<code>next</code>,&nbsp;<code>react</code>, and&nbsp;<code>react-dom</code>) plus some dummy pages and styles.<h2>Next.js Scripts</h2><pre class="ql-syntax" spellcheck="false">You currently find four main scripts listed in your&nbsp;package.json&nbsp;file:"scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "lint": "next lint"
}
</pre><ul><li><code>dev</code>&nbsp;– runs a development server on localhost:3000</li><li><code>build</code>&nbsp;– creates a built application ready for deployment</li><li><code>start</code>&nbsp;– starts your built Next application (must run&nbsp;<code>next build</code>&nbsp;first)</li><li><code>lint</code>&nbsp;– will "lint" your Next project using the dev dependency ESLint to warn you if your written code needs to be fixed</li></ul>To run your Next project in development, make sure you are in your project folder (my-next-project) and run the dev script:<pre class="ql-syntax" spellcheck="false">npm run dev
</pre>After your project is up and running on localhost:3000, navigate there and you should see a default app:<img src="https://www.freecodecamp.org/news/content/images/2022/01/Screen-Shot-2022-01-14-at-2.41.23-PM.png" alt="Screen-Shot-2022-01-14-at-2.41.23-PM" height="1376" width="1402">Index page of Create-Next-App project<h2>Add TypeScript to Next.js</h2>Want to add TypeScript? Couldn't be easier:<pre class="ql-syntax" spellcheck="false"># run 'touch' to create an empty config file
# Next will auto-populate it

touch tsconfig.json 

# then you'll be prompted to run the command:
npm install -D typescript @types/react @types/node

# now you can use TypeScript everywhere ✨
</pre><h2>Pages and Routes</h2>Want to add an About page to your app?Just drop your component in /pages/about.js (.tsx if you're using TypeScript):<pre class="ql-syntax" spellcheck="false">// No React import needed up here! 😳

export default function About() {
 return &lt;div&gt;About&lt;/div&gt;
}
</pre>And it works!This is a great advantage because we no longer have to install a library like React Router that requires boilerplate such as a Router and Route component, among others.If you would like dynamic pages, which are in the same folder but have different slugs (such as blog posts), Next allows us to render the same page component by wrapping the filename in brackets.For example, to display blog posts according to a particular slug, we could drop a "blog" folder in pages with the filename: [slug].js:<pre class="ql-syntax" spellcheck="false">import { useRouter } from 'next/router'

// if we navigate to localhost:3000/blog/123...
export default function BlogPost() {
 const router = useRouter()
 const { slug } = router.query

 return &lt;p&gt;Post: {slug}&lt;/p&gt; // ...you'll see "Post: 123"
}
</pre>Next conveniently exposes a&nbsp;<code>useRouter</code>&nbsp;React hook to make accessing information about the app location or history very easy.In this example, it allows us to get the query parameters (the dynamic value) from&nbsp;<code>router.query</code>. The property name&nbsp;<code>slug</code>&nbsp;matches the dynamic name we gave our file:&nbsp;<code>[slug].js</code>.<blockquote>Note: You can have multiple query parameters due to using nested folders with dynamic names. Such as /blog/[topic]/[slug].js. From within [slug].js, we could access both the&nbsp;<code>topic</code>&nbsp;and&nbsp;<code>slug</code>&nbsp;query params.</blockquote><h2>Links and Navigation</h2>Just as Next includes routes and routing, the framework also gives us a helpful&nbsp;<code>Link</code>&nbsp;component from&nbsp;<code>next/link</code>.It may look a bit unusual if you are coming from React Router, because it requires placing a traditional anchor tag link as a child and passing the href as a prop.If we wanted to link to the home page (/) and a blog route (i.e. /blog/123), we would include the following in /pages/about.js:<pre class="ql-syntax" spellcheck="false">import Link from "next/link";

export default function About() {
 return (
 &lt;div&gt;
 &lt;h1&gt;About Me&lt;/h1&gt;
 
 &lt;div&gt;
 &lt;Link href="/"&gt;
 &lt;a&gt;Home&lt;/a&gt;
 &lt;/Link&gt;
 &lt;Link href="/blog/123"&gt;
 &lt;a&gt;My Blog Post&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}
</pre><code>href</code>&nbsp;is the only required prop for the&nbsp;<code>Link</code>&nbsp;component and data can be passed to it as an object as well:<pre class="ql-syntax" spellcheck="false">import Link from "next/link";

export default function About() {
 return (
 &lt;div&gt;
 &lt;h1&gt;About Me&lt;/h1&gt;

 &lt;div&gt;
 &lt;Link href={{ pathname: "/about" }}&gt;
 &lt;a&gt;Home&lt;/a&gt;
 &lt;/Link&gt;
 &lt;Link
 href={{
 pathname: "/blog/[slug]",
 query: { slug: "123" },
 }}
 &gt;
 &lt;a&gt;My Blog Post&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}
</pre>Route changes can also be done using the&nbsp;<code>useRouter</code>&nbsp;hook, primarily using the&nbsp;<code>.push()</code>&nbsp;method to push to a different route programmatically.Here is a dummy example of a login page where a user provides their email to login and is pushed to the '/verify-email' route afterwards.<pre class="ql-syntax" spellcheck="false">export default function Login() {
 const router = useRouter()
 
 function onSubmit(event) {
 event.preventDefault();
 const email = event.target.elements.email.value; 
 await sendLoginEmail(email); 
 // push user to /verify-email page
 router.push('/verify-email');
 }
 
 return (
 &lt;div&gt;
 &lt;h1&gt;Log in here&lt;/h1&gt;

 &lt;form onSubmit={onSubmit}&gt;
 &lt;input name="email" placeholder="Your email address" /&gt;
 &lt;button type="submit"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 );
}
</pre><h2>SEO in Next.js</h2>Pages in web applications not only need data within the HTML body, but meta (head) tags as well.In a Create React Application, this would require installing an external dependency called React Helmet.In Next, we can use the&nbsp;<code>Head</code>&nbsp;component from&nbsp;<code>next/head</code>&nbsp;to conveniently add meta data to our webpages to be shown in search results and embeds:<pre class="ql-syntax" spellcheck="false">import Link from "next/link";
import Head from "next/head";

export default function About() {
 return (
 &lt;div&gt;
 &lt;Head&gt;
 	&lt;title&gt;About | My Cool Site&lt;/title&gt;
 &lt;meta name="description" content="You really need to read this website because it's made with Next.js" /&gt;
 &lt;/Head&gt;
 
 &lt;h1&gt;About Me&lt;/h1&gt;
 &lt;div&gt;
 &lt;Link href="/"&gt;
 &lt;a&gt;Home&lt;/a&gt;
 &lt;/Link&gt;
 &lt;Link href="/blog/123"&gt;
 &lt;a&gt;My Blog Post&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}
</pre><blockquote>Note: The Head component should be included within any page component, usually right within the opening tag. You can create a reusable Head component that accepts dynamic values via props.</blockquote>

Get Started with Next.js – The React Library Your Project Needs(1)

Nếu đã từng làm việc với front-end chắc hẳn bạn không còn xa lạ gì với khái niệm Server Side Render đúng không. Trong bài viết lần này mình sẽ giới thiệu về một framework phổ biến hỗ trợ tối đa và tối ưu hoá cho bạn trong quá trình phát triển một ứng dụng Server Side Render, đó là NextJS. <h3>What is Next.js?</h3>Next.js là một framework front-end React được phát triển dưới dạng open-source bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang web static. Next.js xây dựng dựa trên thư viện React, có nghĩa là các ứng dụng Next.js sử dụng core của React và chỉ thêm các tính năng bổ sung. Việc triển khai ứng dụng SSR cho phép máy chủ truy cập tất cả dữ liệu được yêu cầu và xử lý JavaScript cùng nhau để hiển thị trang. Sau đó, trang được gửi lại toàn bộ cho trình duyệt và ngay lập tức được hiển thị. SSR cho phép các trang web load trong thời gian nhỏ nhất và tăng trải nghiệm người dùng với khả năng phản hồi nhanh hơn.Ngoài ra, sử dụng SSR cũng mang lại cho bạn lợi thế về SEO, giúp trang web của bạn hiển thị cao hơn trên các trang kết quả của công cụ tìm kiếm. SSR làm cho các trang web xếp hạng tốt hơn cho SEO vì chúng tải nhanh hơn và nhiều nội dung trang web có thể được quét bởi các SEO trackers. Thẻ &lt;head&gt; trong Next.js cũng cho phép bạn chỉnh sửa thẻ &lt;head&gt; của một trang web, điều mà bạn không thể thực hiện trong React. Thẻ &lt;head&gt; là một phần cốt lõi trong metadata của trang web và góp phần vào xếp hạng SEO của trang web.<h3>Why use Next.js?</h3>Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO. Với tất cả thông tin trên server, nó sẽ xử lý để generate ra thông tin HTML của trang/ Sau đó Client có thể gửi một yêu cầu đến Server và nhận toàn bộ trang HTML thay vì yêu cầu từng thành phần riêng lẻ với Client Render.<img src="https://images.viblo.asia/90d38271-ce0e-43a2-96eb-cd4a86f7d172.png" height="969" width="829">Điểm mạnh:<ul><li>Ứng dụng Next.js tải nhanh hơn đáng kể so với ứng dụng React do được render phía Server.</li><li>Hỗ trợ các tính năng cho static web.</li><li>Đối với những ai đã có kinh nghiệm làm việc với React thì việc tiếp tập NextJS sẽ là một việc dễ dàng.</li><li>Tự động code splitting cho các page nhằm tối ưu hoá performance khi load trang.</li><li>Dễ dàng xây dựng các API internal thông qua các API routes tích hợp sẵn và tạo các endpoit API.</li><li>Hỗ trợ tích hợp cho route cho page, CSS, JSX và TypeScript.</li><li>Nhanh chóng thêm các plugin để tùy chỉnh Next.js theo nhu cầu của trang cụ thể của bạn.</li></ul>Điểm yếu:Nhược điểm thực sự duy nhất của Next.js là nó là một framework được cố định, có nghĩa là nó có một phương pháp và bộ công cụ cụ thể mà nó muốn bạn sử dụng để xây dựng các ứng dụng của mình. Tuy nhiên, các tùy chọn của Next.js sẽ phù hợp với phạm vi của hầu hết các dự án.<h3>When to use Next.js?</h3>Next.js phù hợp nhất để tạo trang chủ hoặc trang đích được tối ưu hóa cũng như bất kỳ trang nào khác dựa trên lưu lượng truy cập tìm kiếm không phải trả tiền. Các trang này sẽ được hưởng lợi nhiều nhất từ các cải tiến SEO của Next.js.Next.js cũng tốt hơn cho các trang web so với các ứng dụng web khác vì SSR cho phép nó có cùng hiệu suất bất kể thiết bị mà khách hàng đang sử dụng.Next.js ít lý tưởng hơn để tạo các ứng dụng web hoặc các ứng dụng bảo mật yêu cầu xác thực vì những điều này không có lợi cho render phía máy chủ.<h3>Get started with Next.js.</h3>Trong phần này mình sẽ giới thiệu cho các bạn 5 thành phần cơ bản của NextJS. Trước khi đi vào chi tiết của từng concept thì chúng ta sẽ setting môi trường và init một NextJS application nhé. Đầu tiên các bạn cần cài đặt NodeJS trước để có thể tạo và run một ứng dụng NextJS trên máy tính của mình. Việc cài đặt NodeJS rất đơn giản nên bạn có thể tham khảo một số bài viết trên Google để tìm hiểu cách cài đặt nhé. Lưu ý khi setting nodejs là version phải từ 12.0.0 trở lên nhé các bạn.NextJS hỗ trợ cả Javascript và Typescript nên bạn có thể init project theo ngôn ngữ mà bạn muốn phát triển nhé.Với Javascript:&nbsp;<code style="background-color: rgb(238, 238, 238);">npx create-next-app &lt;app-name&gt;</code>Với typescript:&nbsp;<code style="background-color: rgb(238, 238, 238);">npx create-next-app &lt;app-name&gt; --typescript</code>Sau khi tạo xong ứng dụng NextJS bạn vào file package.json để xem các script sau để khởi chạy một ứng dụng NextJS.<pre class="ql-syntax" spellcheck="false">"scripts": {
 "dev": "next dev",
 "start": "next start",
 "build": "next build"
}
</pre>dev: Khởi động Next.js trong development mode. start: Khởi động Next.js trong production mode. build: xây dựng ứng dụng Next.js của bạn để deploy lên production.Nếu bạn chạy ứng dụng này bằng cách sử dụng&nbsp;<code style="background-color: rgb(238, 238, 238);">next dev</code>, bạn sẽ thấy trang Next.js mặc định trên http: // localhost: 3000.<img src="https://images.viblo.asia/47466b2c-ad81-4288-bebf-14c0906e27c3.png" height="2079" width="2400"><h3>Next.js Folder Structures.</h3>Next.js sử dụng hệ thống tệp tối giản để tránh tệp dự án lộn xộn, có nghĩa là điểm bắt đầu chỉ chứa mức tối thiểu cần thiết để chạy ứng dụng. Hiểu cấu trúc thư mục này sẽ giúp bạn thao tác nó để phù hợp với các dự án của riêng bạn.Mỗi dự án Next.js bắt đầu với 3 thư mục: pages, public và styles.Dưới đây là một ví dụ về những gì bạn sẽ tìm thấy trong một dự án Next.js mới:<pre class="ql-syntax" spellcheck="false">- pages
 - api
 - hello.js
 - _app.js
 - index.js
- public
 - favicon.ico
 - vercel.svg
- styles
 - globals.css
 - Home.module.css
</pre>Pages:Thư mục pages chứa các tệp trang của bạn. Mỗi tệp pages là một React Component với một route duy nhất được tạo tự động từ tên tệp. Ví dụ, trang hello.js Next.js sẽ được tìm thấy tại page/hello.js.Một số trang như _app.js ở trên, bao gồm tiền tố gạch dưới trong tên của chúng để đánh dấu chúng là component tùy chỉnh. Các component này được Next.js sử dụng để làm việc với các component khác.Ví dụ: _app.js được sử dụng để bắt đầu mỗi trang và không được sử dụng làm trang web của riêng nó.Public:Thư mục này dành cho việc phân phát tệp tĩnh, có nghĩa là các tệp này không thay đổi và chỉ có thể được tham chiếu.Thư mục này thường chứa hình ảnh hoặc biểu tượng mà trang web sử dụng cũng như thông tin nội bộ như Xác minh trang web của Google.Ví dụ: Trong thư mục Public hiện có favicon.ico là một biểu tượng nhỏ để sử dụng trên các tab của trình duyệt và vercel.svg hiển thị biểu tượng của công ty.Styles:Thư mục này chứa các tệp CSS của toàn bộ ứng dụng. Tệp Gloals.css thiết lập tiêu chuẩn chung mà tất cả các trang trong dự án sẽ sử dụng.Bạn cũng có thể thêm style dành riêng cho component bằng cách sử dụng các tệp module được đặt tên với hậu tố module, &lt;componentName&gt; .module.css.Routing/Navigation in your App.Navigation cho phép user của bạn có thể điều hướng giữa các trang web với nhau trong Next.js. Routes và Links là hai phương pháp chính bạn có thể sử dụng để xác định cách điều hướng trang web. Các Route trong Next.js có thể tiếp cận được do Next đã tích hợp chức năng định tuyến vào của từng component trong thư mục page. Để tối ưu hóa định tuyến ứng dụng của bạn, điều quan trọng là phải hiểu index, nested routes và dynamic routes. Cùng mình tìm hiểu các khái niệm đó dưới đây nhé.Index.Các tệp như index.js được chuyển đến root point của ứng dụng của bạn /, thay vì /index. Bạn có thể sử dụng điều này để làm lợi thế của mình bằng cách tạo nhiều tệp chỉ mục hoạt động như trang đích hoặc điểm bắt đầu của các đường dẫn điều hướng khác nhau trong trang web của bạn. Ví dụ như:<pre class="ql-syntax" spellcheck="false">- pages
 - index.js # found at `/`
 - users
 - index.js # found at `/users`
 - account.js # `/users/account`
</pre>Ở ví dụ trên, trang index.js bên dưới các trang là trang chủ của trang web được truy cập nếu không có route bổ sung nào được nhập. Index.js thứ hai dưới users là trang đích cho đường dẫn user, được bằng cách nhập&nbsp;<code style="background-color: rgb(238, 238, 238);">&lt;siteName&gt; / users.</code>Nested.Nested routes là các route chỉ có thể truy cập thông qua một route mẹ được chia sẻ, chẳng hạn như /user/account. Bạn có thể nghĩ về các route lồng nhau giống như các tệp lồng nhau trên máy tính của bạn, trong đó bạn phải điều hướng qua tất cả các component cao hơn để đến được component lồng nhau.Dynamic Routes.Chức năng route trong NextJS cũng giúp chúng ta có thể tạo ra các trang web với đường dẫn động. Chẳng hạn như một trang web có chức năng detail của user khi click vào một user trên list user thì chúng ta sẽ định nghĩa file như sau:<pre class="ql-syntax" spellcheck="false"># ...
 - users
 - index.js
 - [account.js] # `/users/[accountName]`
</pre>Lúc này chúng ta đã có thể tạo ra một trang web detail của 1 user nào đó và có thể truy cập chúng thông qua URL:&nbsp;<code style="background-color: rgb(238, 238, 238);">/users/[accountName]</code>Link.Link là thành phần được Next phát triển để cho phép người dùng có thể chuyến hướng giữa các route với nhau. Ví dụ: hãy xem xét một thư mục trang có các tệp sau:<pre class="ql-syntax" spellcheck="false">pages/index.js
pages/about.js
pages/blog/[slug].js
</pre>Chúng ta có thể có một Link đến từng trang này như dưới đây:<pre class="ql-syntax" spellcheck="false">import Link from 'next/link'

function Home() {
 return (
 &lt;ul&gt;
 &lt;li&gt;
 &lt;Link href="/"&gt;
 &lt;a&gt;Home&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;Link href="/about"&gt;
 &lt;a&gt;About Us&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;Link href="/blog/hello-world"&gt;
 &lt;a&gt;Blog Post&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 )
}

export default Home
</pre>Link chấp nhận các prop sau:<ul><li>href - Đường dẫn hoặc URL để điều hướng đến.</li><li>as - Decorator tùy chọn cho đường dẫn sẽ được hiển thị trong thanh URL của trình duyệt.</li><li>passHref - Buộc Link gửi thuộc tính href đến con của nó. Mặc định là false.</li><li>replace - Thay thế trạng thái history hiện tại thay vì thêm url mới vào stack. Mặc định là false.</li><li>scroll - Cuộn lên đầu trang sau khi điều hướng đến. Mặc định là true.</li><li>shallow - Cập nhật đường dẫn của trang hiện tại mà không cần chạy lại getStaticProps, getServerSideProps hoặc getInitialProps. Mặc định là false.</li></ul>.... và một số props khác.Ngoài ra để NextJS cũng support chúng ta trong việc khai báo và điều hướng đến các Dynamic Routes bằng Link:Ví dụ: Các trang Dynamic Routes&nbsp;<code style="background-color: rgb(238, 238, 238);">/blog/[slug].js</code>&nbsp;sẽ khớp với liên kết sau:<pre class="ql-syntax" spellcheck="false">import Link from 'next/link'

function Posts({ posts }) {
 return (
 &lt;ul&gt;
 {posts.map((post) =&gt; (
 &lt;li key={post.id}&gt;
 &lt;Link href={`/blog/${encodeURIComponent(post.slug)}`}&gt;
 &lt;a&gt;{post.title}&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 )
}

export default Posts
</pre><h3>Conclusion.</h3>Trong bài viết này mình đã giới thiệu cơ bản về một số khái niệm trong NextJS cũng như ưu và nhược điểm của nó. Trong phần tiếp theo mình sẽ đi sâu vào các khái niệm cũng như cách hoạt động của chúng trong NextJS nhé.

Tìm hiểu về framework NextJS

<h2>(Dân trí) - Ngoại trưởng Nga Sergey Lavrov cảnh báo nguy cơ "thực sự" về Chiến tranh thế giới thứ 3, trong bối cảnh phương Tây gia tăng viện trợ vũ khí cho Ukraine để đối phó với chiến dịch quân sự của Moscow.</h2><img src="https://cdnphoto.dantri.com.vn/BpUC8d2pesAe7jwU3frj68y3ouI=/thumb_w/1155/2022/04/26/ngoaitruongnga-1650928312919.jpg" alt="Nga cảnh báo nguy cơ Chiến tranh Thế giới thứ 3 - 1">Ngoại trưởng Nga Sergey Lavrov (Ảnh: Reuters).Trong cuộc phỏng vấn đăng trên trang web của Bộ Ngoại giao Nga hôm 25/4, Ngoại trưởng Sergey Lavrov cảnh báo, việc phương Tây chuyển giao vũ khí cho Ukraine đồng nghĩa với việc liên minh NATO "về bản chất đang tham chiến với Nga" và Moscow coi những vũ khí này là mục tiêu tấn công hợp pháp."Những vũ khí này sẽ bị coi là mục tiêu hợp pháp cho hành động <a href="https://dantri.com.vn/the-gioi/quan-su.htm" rel="noopener noreferrer" target="_blank" style="font-weight: var(--bs-body-font-weight); display: inline !important;">quân sự</a> của Nga trong bối cảnh chiến dịch đặc biệt", Ngoại trưởng Lavrov tuyên bố."Các cơ sở lưu trữ (vũ khí) ở miền Tây Ukraine từng nhiều lần trở thành các mục tiêu của lực lượng Nga. Về bản chất, NATO đang tham gia vào một cuộc chiến tranh với Nga thông qua một bên ủy nhiệm và NATO đang trang bị cho bên ủy nhiệm đó", ông Lavrov nói thêm.Về vấn đề đàm phán, Ngoại trưởng Lavrov cũng chỉ trích cách tiếp cận của Ukraine."Thiện chí cũng chỉ có giới hạn. Nếu không có đi có lại, thì điều đó không giúp ích gì cho quá trình thương lượng", nhà ngoại giao Nga nhấn mạnh.Tuy nhiên, ông Lavrov khẳng định Nga vẫn đang "tiếp tục tham gia vào các cuộc đàm phán với nhóm đàm phán do Tổng thống Ukraine Volodymyr Zelensky ủy nhiệm, và những cuộc tiếp xúc này sẽ tiếp tục".Ngoại trưởng Nga cho rằng ông Zelensky, một cựu diễn viên hài, chỉ đang "giả bộ" đàm phán. "Nếu xem kỹ và đọc kỹ những gì ông ấy nói, thì sẽ thấy có hàng nghìn điểm mâu thuẫn", ông Lavrov nói thêm.Trước tình hình căng thẳng hiện nay, Ngoại trưởng Lavrov cho rằng nguy cơ xảy ra Chiến tranh&nbsp;<a href="https://dantri.com.vn/the-gioi.htm" rel="noopener noreferrer" target="_blank">Thế giới thứ 3 là "có thật". "Mối nguy hiểm này rất nghiêm trọng, tồn tại thực sự và không thể đánh giá thấp điều đó", ông Lavrov cảnh báo.</a>Đề cập tới cuộc xung đột đang diễn ra ở Ukraine, Ngoại trưởng Nga tin tưởng rằng "mọi thứ tất nhiên sẽ kết thúc với việc ký kết một hiệp định"."Nhưng các yếu tố của hiệp định này sẽ được xác định bởi tình trạng giao tranh diễn ra tại thời điểm hiệp định trở thành hiện thực", ông Lavrov nói thêm.Trước đó, trong cuộc phỏng vấn với truyền thông Anh hồi đầu tháng, người phát ngôn Điện Kremlin Dmitry Peskov cho biết: "Nếu Ukraine trở thành một thành viên của NATO và tấn công Nga để giành quyền kiểm soát Crimea, áp dụng Điều 5 của Hiến chương NATO, các nước đồng minh có vũ khí hạt nhân sẽ phải bảo vệ Ukraine, điều này có thể dẫn đến Chiến tranh thế giới thứ 3. Chiến dịch hiện tại sẽ bảo vệ chúng tôi khỏi mối đe dọa tiềm tàng của một cuộc chiến như vậy".Theo hiệp ước của NATO, liên minh này sẽ "kích hoạt" Điều 5, tức hành động&nbsp;quân sự&nbsp;tập thể, khi một hay nhiều thành viên của khối bị tấn công quân sự. Ukraine đã nhiều lần đề xuất gia nhập NATO, song vẫn chưa được chấp thuận.Ông Peskov khẳng định đây không phải một cuộc chiến tranh, mà là một "chiến dịch&nbsp;quân sự&nbsp;đặc biệt" tại Ukraine. Người phát ngôn Điện Kremlin cho rằng việc Nga triển khai chiến dịch này là cần thiết, vì Ukraine đã trở thành một "trung tâm chống Nga" kể từ năm 2014, khi Nga sáp nhập bán đảo Crimea.Tổng thống Mỹ Joe Biden hồi tháng 3 tuyên bố Washington sẽ không gây chiến với Nga ở Ukraine, vì xung đột trực tiếp giữa NATO và Nga sẽ dẫn đến Chiến tranh Thế giới thứ 3. Tuy vậy, Mỹ và các đồng minh vẫn tiếp tục hỗ trợ tài chính, trang thiết bị quân sự cho Ukraine nhằm đối phó với chiến dịch quân sự của Nga.&nbsp;

Nga cảnh báo nguy cơ "Chiến tranh Thế giới thứ 3"

﻿"Có một chuỗi xung đột ảnh hưởng đến toàn thế giới. Trên thực tế, Chiến tranh thế giới thứ ba đang diễn ra", Fyodor Lukyanov, chuyên gia tại Hội đồng Chính sách Đối ngoại và Quốc phòng (SVOP) và là tổng biên tập tạp chí Russia in Global Affairs nhận định trong một cuộc phỏng vấn được Komsomolskaya Pravda đăng tải vào tuần trước.Ông Lukyanov cho biết, gần đây,&nbsp;<a href="https://dantri.com.vn/the-gioi.htm" rel="noopener noreferrer" target="_blank">thế giới</a>&nbsp;đã chứng kiến những cuộc xung đột cũ, vốn bị đóng băng, bùng phát trở lại, đồng thời đề cập đến tình trạng căng thẳng ở Nagorno - Karabakh, xung đột Nga - Ukraine và sự leo thang ở Trung Đông.Ông Lukyanov, đồng thời là giám đốc nghiên cứu của Câu lạc bộ Thảo luận Quốc tế Valdai, cho rằng hàng loạt cuộc xung đột đang diễn ra thực chất là Chiến tranh Thế giới mới, khác biệt đáng kể so với hai cuộc xung đột toàn cầu trong thế kỷ 20.Chuyên gia chính sách đối ngoại hàng đầu của Nga cảnh báo, tình hình leo thang ở Trung Đông không phải là cuộc xung đột cuối cùng sắp xảy ra, thay vào đó tình trạng thù địch nhiều hơn dự kiến sẽ sớm bùng phát trên toàn thế giới và dường như không ai có khả năng ngăn chặn chúng ở thời điểm hiện tại."Trật tự quốc tế đang bị phá vỡ. Đó là một điều đáng lo ngại, dựa trên nỗi sợ hãi về sự hủy diệt lẫn nhau, nhưng có thể kiểm soát được. Các cuộc chiến tranh ở Trung Đông từng nổ ra trước đây, nhưng Liên Xô và Mỹ đã can thiệp và dập tắt cho đến cuộc xung đột tiếp theo. Còn bây giờ ngay cả một cơ chế giải quyết tạm thời cũng không có", chuyên gia Lukyanov nói.Ông lưu ý rằng, nhóm chiến binh Hamas rõ ràng đã chọn thời điểm "đúng" để tấn công Israel, vì nước này đã trải qua "sự hỗn loạn nội bộ thường trực" trong hơn một năm qua.Giao tranh hơn 3 tuần qua đã khiến hơn 8.000 người ở Gaza và hơn 1.400 người ở Israel thiệt mạng. Đây là cuộc xung đột nghiêm trọng nhất giữa Israel và Hamas trong vòng hàng chục năm trở lại đây.Giới chức Israel dự đoán xung đột lần này với Hamas sẽ là một cuộc chiến khó khăn và kéo dài và Tel Aviv đã chuẩn bị sẵn sàng cho tình huống này.Ngoại trưởng Thổ Nhĩ Kỳ Hakan Fidan&nbsp;tuần trước cảnh báo, kết quả duy nhất có thể xảy ra đối với căng thẳng Israel - Palestine hiện nay là "một nền hòa bình lâu dài hoặc một cuộc chiến tranh thế giới".Ông Jake Sullivan, Cố vấn An ninh Quốc gia của Tổng thống Mỹ, cảnh báo Washington nhận thấy nguy cơ xung đột lan rộng ở Trung Đông ngày càng tăng khi các nhóm được Iran hậu thuẫn tiếp tục tấn công các lực lượng Mỹ đóng quân trong khu vực.Giữa lúc tình hình biên giới phía nam căng thẳng do các cuộc tập kích của Hamas, Israel cũng phải đối phó với các cuộc tập kích của lực lượng Hezbollah ở Li Băng và lực lượng ở Syria.Ngoại trưởng Iran Hossein Amir-Abdollahian cảnh báo Trung Đông có thể trở thành "thùng thuốc súng" do căng thẳng leo thang. Tổng thống Iran Ebrahim Raisi cũng nhận định, cánh cửa ngoại giao nhằm giải quyết xung đột Israel - Hamas đang khép dần lại, cuộc chiến này có nguy cơ lan rộng ra các mặt trận khác.

Chuyên gia Nga: Chiến tranh thế giới thứ 3 đã bắt đầu

<h2>Với sự sa sút của các lò đào tạo trẻ chất lượng như Học viện Hoàng Anh Gia Lai, Nutifood JMG..., bóng đá Việt Nam càng mất đi cơ hội tạo ra thêm nhiều lứa cầu thủ giỏi cho tương lai.</h2> <ul><li> </li></ul><a href="https://cdn.tuoitre.vn/471584752817336320/2024/4/5/base64-17123328907281445704149.jpeg" rel="noopener noreferrer" target="_blank" style="color: transparent;"><img src="https://cdn.tuoitre.vn/thumb_w/730/471584752817336320/2024/4/5/base64-17123328907281445704149.jpeg" alt="B.Bình Dương (giữa) và SLNA là hai đội dùng nhiều cầu thủ trẻ. Nhưng như thế vẫn là quá ít để bóng đá Việt Nam có thể tạo đột phá - Ảnh: VPF" height="1322" width="2000"></a> B.Bình Dương (giữa) và SLNA là hai đội dùng nhiều cầu thủ trẻ. Nhưng như thế vẫn là quá ít để bóng đá Việt Nam có thể tạo đột phá - Ảnh: VPFSau hơn 10 ngày mở ra, rất nhiều ý kiến đã đóng góp cho diễn đàn từ việc đào tạo trẻ đến tuyển chọn HLV cho đội tuyển Việt Nam. Nhưng tựu trung để <a href="https://tuoitre.vn/bong-da-viet-nam.html" rel="noopener noreferrer" target="_blank" style="font-weight: var(--bs-body-font-weight); color: rgb(34, 106, 197); display: inline !important;">bóng đá Việt Nam</a> phát triển bền vững và hướng đến mục tiêu World Cup, những người có trách nhiệm cần đưa ra một chiến lược căn cơ để có thể thay đổi một cách đồng bộ.Bóng đá Việt Nam không thể phát triển mạnh mẽ hơn nếu như không có một nền móng tốt từ đào tạo trẻ.<h2>Thay đổi nền móng</h2>Ngoài ra, bóng đá Việt Nam cũng thiếu một giám đốc kỹ thuật (GĐKT) đúng nghĩa để thống nhất giáo trình đào tạo. Trong khi ở các nước, giám đốc kỹ thuật đóng vai trò rất quan trọng. Cụ thể, từ năm 2015, bóng đá Campuchia đã bổ nhiệm ông Kazunori Ohara làm giám đốc kỹ thuật. Và vị chuyên gia Nhật Bản này đã tham gia thành lập 25 học viện&nbsp;<a href="https://tuoitre.vn/bong-da-tre.html" rel="noopener noreferrer" target="_blank" style="color: rgb(34, 106, 197);">bóng đá trẻ trên khắp Campuchia chỉ trong 2 năm 2017-2018.</a>Chia tay Campuchia, ông Kazunori Ohara vừa gia nhập CLB Trường Tươi Bình Phước ở Giải hạng nhất để bắt đầu với vai trò trợ lý cho HLV Nguyễn Anh Đức. Trước đó, cựu giám đốc kỹ thuật của VFF - ông Yusuke Adachi - cũng được CLB Bình Phước mời về làm tổng giám đốc hồi đầu năm nay để nâng tầm CLB."Tiềm năng <a href="https://tuoitre.vn/cau-thu-viet-nam.html" rel="noopener noreferrer" target="_blank" style="font-weight: var(--bs-body-font-weight); color: rgb(34, 106, 197); display: inline !important;">cầu thủ Việt Nam là rất lớn. Chúng tôi có thể tạo ra một CLB hình mẫu cho toàn châu Á", ông Yusuke Adachi nói trong ngày ra mắt.</a> CLB <a href="https://tuoitre.vn/song-lam-nghe-an.html" rel="noopener noreferrer" target="_blank" style="font-weight: var(--bs-body-font-weight); color: rgb(34, 106, 197); display: inline !important;">Sông Lam Nghệ An</a> (SLNA) cũng vừa ký kết hợp tác với CLB Mito Hollyhock (Nhật Bản) hồi cuối năm ngoái, trong đó có mảng đào tạo trẻ. Là một trong những lò đào tạo trẻ chất lượng của bóng đá Việt Nam, sự hợp tác này cũng có thể mang đến những kỳ vọng cho bóng đá nước nhà.Nhưng chỉ CLB Trường Tươi Bình Phước hay SLNA thì vẫn chưa đủ để bóng đá Việt Nam có thể phát triển. Nó cần cả một hệ thống các CLB chuyên nghiệp của Việt Nam cùng thay đổi trong việc chú trọng đào tạo trẻ. Quan trọng hơn, các CLB cần có chung một giáo trình đào tạo chuẩn để cầu thủ không phải làm quen lại từ đầu khi lên khoác áo các đội tuyển trẻ rồi đội tuyển quốc gia.<h2>Lựa chọn HLV ngoại phù hợp</h2>Qua các cuộc trao đổi với các chuyên gia, HLV hay cựu tuyển thủ đều cho rằng bóng đá Việt Nam vẫn phải đặt niềm tin vào HLV ngoại. Điều này do HLV nội từng được trao cơ hội nhưng đều không làm thành công, việc chọn cầu thủ cũng khó tránh khỏi sự thiên vị. Và quan trọng hơn, HLV nội không chịu được sức ép và thường bị chi phối bởi lãnh đạo.Trong sự nghiệp thi đấu, tiền đạo Lê Công Vinh từng trải qua 5 đời HLV ngoại: Alfred Riedl (Áo), Edson Tavares (Brazil), Henrique Calisto (Bồ Đào Nha), Falko Goetz (Đức), Toshiya Miura (Nhật Bản) cùng 3 HLV nội Phan Thanh Hùng, Hoàng Văn Phúc và Nguyễn Hữu Thắng. Điều này giúp Công Vinh có cái nhìn rất rõ về việc tuyển chọn HLV cho bóng đá Việt Nam. Anh chia sẻ: "Tuyển Thái Lan được dẫn dắt bởi HLV Masatada Ishii, người từng làm cho CLB Buriram United mấy mùa, nên lập tức thành công. Ông ấy biết cầu thủ Thái Lan nào tốt để lựa chọn. Thêm một thuận lợi là các CLB Thái Lan đều có lối chơi kiểm soát bóng và phối hợp nhỏ, nên HLV Masatada Ishii dựa vào đó mà phát triển cho <a href="https://tuoitre.vn/doi-tuyen-thai-lan.html" rel="noopener noreferrer" target="_blank" style="font-weight: var(--bs-body-font-weight); color: rgb(34, 106, 197); display: inline !important;">đội tuyển Thái Lan</a>.Do đó, HLV ngoại dẫn dắt tuyển Việt Nam phải am hiểu bóng đá Việt Nam. Tuy nhiên, hiểu văn hóa Việt Nam mới là yếu tố phải coi trọng đầu tiên. Tại sao HLV Toshiya Miura không thành công nhiều với bóng đá Việt Nam?Điều này do môi trường, con người Nhật Bản và Việt Nam khác nhau. HLV Nhật Bản cũng rất nguyên tắc, làm theo triết lý của mình. Trong khi đó, sự ứng biến chiến thuật cho phù hợp với cầu thủ Việt Nam giúp HLV <a href="https://tuoitre.vn/park-hang-seo.html" rel="noopener noreferrer" target="_blank" style="font-weight: var(--bs-body-font-weight); color: rgb(34, 106, 197); display: inline !important;">Park Hang Seo thành công".</a>Dù vậy, Công Vinh cũng cho rằng bóng đá Việt Nam nên chuyển sang HLV đến từ Bồ Đào Nha hoặc Tây Ban Nha để kỳ vọng vào một sự đột phá.Anh nói: "Chúng ta từng mời hai HLV Brazil và đều thất bại. Tương tự là HLV châu Âu như Falko Goetz rồi Philippe Troussier. Tại sao giờ chúng ta không thử chọn một HLV châu Âu nhưng pha trộn trường phái Nam Mỹ như Bồ Đào Nha hay Tây Ban Nha. HLV Calisto từng thành công với bóng đá Việt Nam là ví dụ".Bao năm qua, lối chơi của tuyển Việt Nam thay đổi theo từng HLV ngoại. Đó là điều cần phải quan tâm và thay đổi.Chẳng hạn đội tuyển Thái Lan dù thay HLV ngoại nào đi chăng nữa, đội tuyển nước này vẫn chơi kiểm soát bóng, đá bóng ngắn, phối hợp nhanh dựa trên lối chơi chung của các CLB. Vì vậy muốn thay đổi, bóng đá Việt Nam phải trở lại với câu chuyện nền móng đào tạo trẻ phải theo một giáo trình thống nhất.Như thế, ngoài việc cần một GĐKT còn phải có sự giúp sức của đội ngũ các cựu tuyển thủ để phân tích tình hình hiện tại của các CLB, tình hình cầu thủ và đội tuyển Việt Nam để định ra một hướng đi phù hợp nhất.<h2>Hơn 700 ý kiến bạn đọc đóng góp cho diễn đàn</h2>Trong hơn 10 ngày, diễn đàn đã nhận được rất nhiều bài viết và hơn 700 ý kiến đóng góp của bạn đọc. Hai chủ đề được bạn đọc chia sẻ nhiều nhất là chọn HLV nội hay HLV ngoại và tuyển Việt Nam cần phải theo đuổi lối chơi nào. Đa số bạn đọc vẫn ủng hộ chọn HLV ngoại cho đội tuyển, nhất là các HLV châu Á có sự am hiểu và gần gũi với bóng đá Việt Nam.Sôi nổi nhất là chủ đề: tuyển Việt Nam cần phải theo đuổi lối chơi nào? Có hàng trăm ý kiến tin rằng thể trạng và tầm vóc con người Việt Nam phù hợp với lối đá phòng ngự phản công. Thực tế lối đá này đã đưa tuyển Việt Nam đi đến thành công dưới thời HLV Park Hang Seo. Nhưng cũng có luồng ý kiến cho rằng tuyển Việt Nam nên xây dựng lối đá đa dạng tùy thuộc vào từng đối thủ.Bên cạnh đó cũng có nhiều bạn đọc khẳng định tuyển Việt Nam muốn chơi kiểm soát bóng phải có thời gian xây dựng căn cơ 10-15 năm. Muốn chơi kiểm soát bóng phải có yếu tố con người và sự nhất quán từ cấp CLB, các tuyến trẻ rồi mới đến đội tuyển quốc gia. Nếu không đạt được những yếu tố này thì bóng đá kiểm soát chỉ mãi là mơ ước.

Diễn đàn 'Bóng đá Việt Nam làm gì để lấy lại vị thế?': Cần một chiến lược căn cơ

<blockquote>HLV Philippe Troussier dành phần lớn thời gian trầm ngâm trên ghế, đôi khi lao ra đường biên nhưng không thể vực dậy tinh thần của cầu thủ Việt Nam trong trận thua Indonesia 0-3 ở vòng loại World Cup 2026.</blockquote><img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287210554814-2ede6f3b7d277796626e4c24bb22a940-1711458876.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=ea89tOGiM8A-E43leqty3Q">HLV Troussier (phải) bắt tay đồng nghiệp bên phía Indonesia Shin Tae-yong trước trận đấu ở lượt bốn vòng loại World Cup 2026 - khu vực châu Á, trên sân Mỹ Đình tối 26/3.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287031576972-8afcce8500799ce62b91493528ca917e-1711458864.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=s5s_QIlQE7atshIkeHGwag">Thất bại 0-1 trên sân Bung Karno Indonesia hôm 21/3 khiến sức ép đè nặng lên HLV Troussier. Đó là trận thua thứ sáu liên tiếp của đội tuyển dưới thời HLV người Pháp, và là thất bại thứ hai trước Indonesia - đối thủ từng dưới cơ Việt Nam khi HLV Park Hang-seo còn tại vị.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287177421760-00d1d3afc794c271fcae796c756a8022-1711458871.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=nU7V1Jn7Y-2jpBAOFAHUdg">Không tạo ra khác biệt nào về lối chơi, Việt Nam để Indonesia mở tỷ số ngay phút thứ 9, khi hậu vệ nhập tịch Jay Idzes bật cao đánh đầu từ một quả phạt góc.<img src="https://i1-thethao.vnecdn.net/2024/03/26/57d7047d-0750-4790-84d0-e940bc0d0e32-1711469689.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=mEPpmKCSssEsDxRV1Hpbyg">HLV Troussier và các cộng sự thất thần trên băng ghế huấn luyện.Trận này, ông vẫn bố trí các hậu vệ có chiều cao không tốt như Bùi Tiến Dũng hay Phan Tuấn Tài - người đánh đầu hụt dẫn đến bàn thua duy nhất trong chuyến làm khách của Indonesia tuần trước.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287052890039-7b8fc6fa415f0b9f7a508a837651dcfa-1711458867.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=94tGV-mf4G_QI3eayrGI4Q">Khoảnh khắc hiếm hoi HLV Troussier rời băng ghế huấn luyện, lao ra sát đường biên để đốc thúc cầu thủ Việt Nam.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287092290845-bb0f84577a5e67bb8803cbca6d370a2a-1711458869.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=qGmgtYaNc1c8QOv73Dos2w">Chiến lược gia người Pháp từng nhiều lần bị chỉ trích vì tỏ ra không nhiệt tình chỉ đạo, ít khi hô hào trong các trận đấu, khác với phong cách của người tiền nhiệm Park Hang-seo.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287052041480-b23bdceeef2f1b7112e628b836934d8c-1711458865.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=eyL_GJPv8xWVekcqjtzFcQ">Những chỉ đạo của HLV Troussier dường như không mang lại nhiều tác dụng trận này. Đội tuyển tiếp tục thi đấu rời rạc, mắc sai lầm ở hàng thủ, để các cầu thủ nhập tịch của Indonesia khai thác. Phút 23, tiền đạo Oratmangoen đi bóng như chỗ không người vào cấm địa rồi sút chéo góc, nâng tỷ số lên 2-0 cho Indonesia.Khi hiệp một kết thúc, máy quay cũng bắt gặp cảnh ông lầm lũi đi vào đường hầm trong im lặng, dù bên cạnh là các cầu thủ - những người đang thất vọng và hoang mang vì bị dẫn trước hai bàn.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287104963776-73732ff861dacb46264e2ed3fb830a85-1711458868.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=wskJvoEzeMSVRl1N-RddPA">Trên khán đài, nhiều CĐV Việt Nam mang băng-rôn, biểu ngữ đòi HLV Troussier ra đi.Từ khi nhậm chức vào tháng 2/2023, nhà cầm quân người Pháp dẫn dắt các đội tuyển Việt Nam qua 14 trận, trong đó có 10 thua và bốn thắng - thấp nhất trong số các HLV ngoại từng dẫn dắt đội tuyển.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287122477525-f438da378c21a90e6fec66986ca7606d-1711458870.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=RqOngJcstG4XuUUXut_M4g">Sự phản đối dành cho HLV Troussier còn đến từ cách ông ứng xử với truyền thông và người hâm mộ Việt Nam.Trước khi làm khách trên sân Indonesia cách đây năm ngày, HLV 69 tuổi thẳng thừng nói rằng, có đến 80% CĐV Việt Nam mong ông thất bại và bị sa thải. Tuyên bố này gây ra phản ứng trong dư luận. Và trên sân Mỹ Đình hôm nay, nhiều CĐV đã bày tỏ sự không hài lòng.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287234750760-a8771186e6f651f30d591b409c3caee3-1711460443.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=LnYitbLnFCV8fC4ePLdMlA">Một CĐV với tấm banner mang thông điệp "Troussier Out" (Troussier hãy ra đi), trong khi những người khác tỏ ra ngán ngẩm với lối chơi của đội tuyển. Đây là lần đầu sau 20 năm, Việt Nam mới lại thua Indonesia trên sân nhà Mỹ Đình.<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287234835979-6c206490e2aa5c58d571bf411f9bd8c9-1711460446.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=X5oXVCVQDue52qZc94yRlA">Hội CĐV bóng đá Hải Phòng mang theo nhiều băng-rôn yêu cầu HLV Troussier ta đi, cùng với đó là những thông điệp như: "HLV Troussier xem thường nguời hâm mộ Việt Nam", "HLV Troussier nói dối", "HLV Troussier hãy ra đi nếu là người có tự trọng"...<img src="https://i1-thethao.vnecdn.net/2024/03/26/z5287262226143-76e5232f42f8d8d13f4fda5558e47ea7-1711460448.jpg?w=1200&amp;h=0&amp;q=100&amp;dpr=1&amp;fit=crop&amp;s=wNbknMVuXZJWa5BjcIE3fw">Dưới sân, HLV Troussier tiếp tục đưa ra những điều chỉnh nhưng không mang lại hiệu quả. Đây là khoảnh khắc ông trao đổi với các trợ lý trước khi tung Nguyễn Văn Toàn và Hồ Tấn Tài vào sân. Cuối trận, Việt Nam để Sananta chọc thủng lưới lần thứ ba.