Next.js დამწყებთათვის: თანამედროვე ვებ-აპლიკაციების შექმნა

1. შესავალი Next.js-ში

მოგესალმებით კურსზე Next.js დამწყებთათვის: თანამედროვე ვებ-აპლიკაციების შექმნა. ამ გაკვეთილში ჩვენ განვიხილავთ, თუ რატომ გახდა Next.js ვებ-დეველოპმენტის სტანდარტი და როგორ განსხვავდება ის კლასიკური React-ისგან.

რა არის Next.js?

Next.js არის React-ზე დაფუძნებული ფრეიმვორკი (Framework), რომელიც შექმნილია Vercel-ის მიერ. თუ React არის ბიბლიოთეკა, რომელიც პასუხისმგებელია ინტერფეისის აგებაზე, Next.js არის სრულფასოვანი პლატფორმა, რომელიც გვთავაზობს აპლიკაციის ოპტიმიზაციის, სერვერული რენდერინგისა და მარშრუტიზაციის მზა ინსტრუმენტებს.

React vs Next.js

მნიშვნელოვანია გვესმოდეს, რომ Next.js არ ანაცვლებს React-ს, არამედ აძლიერებს მას. აი შედარებითი ცხრილი:

ძირითადი არქიტექტურული უპირატესობები

• Server-Side Rendering (SSR): გვერდები გენერირდება სერვერზე ყოველი მოთხოვნისას, რაც აუმჯობესებს SEO-ს.
• Static Site Generation (SSG): გვერდები გენერირდება ბილდინგის დროს, რაც უზრუნველყოფს ელვისებურ სისწრაფეს.
• File-based Routing: მარშრუტები ავტომატურად იქმნება app საქაღალდეში ფაილების სტრუქტურით.

პროექტის დაწყება

Next.js-ის პროექტის დასაწყებად გვჭირდება Node.js-ის უახლესი ვერსია. გაუშვით შემდეგი ბრძანება ტერმინალში:

npx create-next-app@latest my-next-app

ამ ბრძანების შემდეგ თქვენ გეკითხებათ კონფიგურაციის პარამეტრებს (TypeScript, ESLint, Tailwind CSS და ა.შ.). რეკომენდებულია აირჩიოთ დიახ ყველაფერზე, რათა მიიღოთ თანამედროვე სტანდარტების შესაბამისი გარემო.

Next.js გვაძლევს საშუალებას, გავამახვილოთ ყურადღება ბიზნეს ლოგიკაზე და არა კონფიგურაციაზე.

პირველი ნაბიჯები

პროექტის შექმნის შემდეგ, გადადით საქაღალდეში და გაუშვით განვითარების სერვერი:

cd my-next-app
npm run dev

ახლა თქვენი აპლიკაცია ხელმისაწვდომია http://localhost:3000 მისამართზე. თქვენ შეგიძლიათ შეცვალოთ app/page.js ფაილი და ცვლილებები მყისიერად აისახება ბრაუზერში. მეტი დეტალებისთვის შეგიძლიათ ეწვიოთ ოფიციალურ დოკუმენტაციას.