Next.js 13 w Praktyce: Inicjalizowanie projektu

0:00Zacznijmy sobie nasz projekt od

0:02zainicjowania go w naszym systemie za pomocą MPX Creed Next app Latest.

0:07W tym momencie chcemy sobie zainstalować paczkę Creed Next App.

0:11Jest to paczka odpowiedzialna za to,

0:13żebyśmy mogli pracować z Next w naszym systemie.

0:16Jak chcemy nazwać nasz projekt?

0:18Nazwiemy go Pocket SAP.

0:21Czy chcemy używać text crypto tego projektu?

0:23Jak najbardziej.

0:25Czy chcemy używać stringa, czyli czy

0:27chcemy mieć automatycznie skonfigurowanego klienta?

0:30Tak. Termin CSS to też będzie good link

0:34solution dla nas w tym projekcie i czy chcemy użyć serce Directory?

0:38Nie chcemy czy chcemy użyć nowego rutera?

0:42Jest już on stabilny, także jak

0:43najbardziej możemy go używać I czy chcemy z custom di?

0:48Frontowe aliasy nie możemy zostawić tak jak one są.

0:51W tym momencie poczekamy na instalację

0:53wszystkich paczek i zaraz przeskoczymy do edytora kodu.

0:57Teraz, kiedy już mamy wszystkie paczki zainstalowane, możemy sobie przeskoczyć do

1:01folderu, który został stworzony CIT Pocket SAP.

1:05Jesteśmy już w folderze naszego projektu

1:08i teraz wystarczy nam tylko i wyłącznie odpalić nasz edytor kodu.

1:11W moim przypadku jest to Visual Studio Code.

1:13To odpalamy sobie edytor kodu i tutaj mamy

1:16po prawej stronie standardowy setup naszej tekstowej aplikacji.

1:22Zobaczmy najpierw co mamy w pakiet ON.

1:25Mamy cztery standardowe skrypty tekstowe Def, build, Start i Blind.

1:31Jeżeli tak naprawdę pod spodem one uruchamiają odpowiednie procesy.

1:35Jeżeli korzystasz ze standardowej komendy, to build oparty jest o Web pack.

1:39Jeżeli natomiast dokumenty dodasz flagę minus minus turbo

1:44to aktywujesz bundle R Turbo Pack napisany przez twórców Next D jest i w tym kursie,

1:49jednak skupimy się na standardowym podejściu z tego względu, że Turbo Pack

1:52jest jeszcze w fazie, nie jest jeszcze w fazie wstępnej do produkcji.

1:57Jest to faza beta, którą można sobie testować.

1:59Natomiast ja chciałem Ci pokazać rozwiązania w miarę stabilne, żebyś mógł

2:02sobie je zastosować przy budowaniu swoich produktów swoich aplikacji.

2:08Jeżeli chodzi o next config.

2:11To tutaj mamy standardowy config.

2:14Ten konflikt będziemy rozszerzać w trakcie

2:17korzystania z naszej aplikacji, w trakcie budowania naszej aplikacji.

2:20Natomiast jeżeli chcesz dowiedzieć się

2:22więcej na temat tego, co w tym configu można ustawiać, co można

2:26znaleźć, zachęcam Cię serdecznie do odwiedzenia strony Next.

2:29Czy jest org.

2:31I tutaj w dokumentacji znajduje się ona dokładnie tutaj niżej.

2:35Mamy wszystkie opcje, które możemy sobie ustawić w naszym pliku konfiguracyjnym.

2:40Wszystko jest fajnie opisane.

2:42Niektóre z tych opcji będziemy jak

2:43najbardziej wykorzystywać w naszym projekcie.

2:45Jeżeli chcesz zachęcam Cię do tego, żeby zapoznał się z tym konfiguracją.

2:48Jeżeli nie możemy dalej pracować, bo tak naprawdę będzie to nam potrzebne

2:53dopiero w kolejnych częściach, w kolejnych lekcjach.

2:57Teraz wróćmy sobie do naszego edytora kodu

2:59i pokażę Ci w jaki sposób wygląda taka bazowa konfiguracja aplikacji Next.

3:04Czy jest okej?

3:05Przenieśliśmy się spowrotem do kodu i tutaj mamy folder app,

3:10w którym tak naprawdę mamy tylko i wyłącznie jakieś globalne style.

3:13Mamy layout bazowy i mamy jakiś page, który jest wyświetlany nam.

3:18To jest domyślny z dokumentacją Nexus a Jeżeli chodzi o folder public jest to

3:24standardowy folder, który znajdziesz we wszystkich aplikacjach frontend owych.

3:28Tak naprawdę jest to folder, który służy

3:30nam do do hostowania plików statycznych takich jak obrazki, fonty,

3:35ikonki, które wykorzystujemy w naszej na naszej stronie.

3:39Także tu możemy się teraz wszystkiego już pozbyć.

3:42Możemy sobie zacząć czyścić naszą konfigurację, nasz projekt tak, żeby móc

3:46później swobodnie sobie budować to, co chcemy budować.

3:49Ja sobie tutaj wszystko wyczyszczę, te style customowe, które są

3:54dostarczone nam z pierwszą konfiguracją projektu.

3:57Jeżeli chodzi o layout to wyczyściłem sobie też fonty.

4:01Nie potrzebujemy tak naprawdę tego import globalny CSS możemy sobie zostawić meta

4:06datę też sobie zostawimy, skonfigurujemy ją tylko na nasze potrzeby.

4:11Jeżeli chodzi o ten tutaj const meta data to są metadane strony.

4:16Tutaj możemy sobie ustawiać takie rzeczy jak pod SEO.

4:19Generalnie jeżeli chodzi o obrazek, o

4:25tytuł, description, description, meta tagi wszystko to możemy sobie tutaj ustawić.

4:30Next przychodzi z takim API

4:33nam z pomocą jeżeli chodzi o klasę na razie sobie kasujemy.

4:37Nie chciałem mieć żadnego klasy na naszym body.

4:40Tutaj zacytujmy naszą aplikację Pocket Cap.

4:43No i description Zrobimy sobie Manage Your Payments.

4:48Mamy początek taki pierwsze czyszczenie.

4:52Jeżeli chodzi o stronę o page to tutaj możemy wszystko sobie wyrzucić.

4:56Nie potrzebujemy tutaj nic.

4:58Tak samo te style tutaj.

5:01Jeżeli chodzi o ten main zostawimy sobie Hello from pocket,

5:05zapiszemy next i meta oczywiście też nie jest nam potrzebny do niczego.

5:09Zapiszemy sobie naszą stronę, czyli mamy layout wyczyszczony.

5:13Mamy pierwszy nasz lutowy page, który też został wyczyszczony.

5:16Mamy Global CSS.

5:18To jest plik.

5:19Importujemy tylko i wyłącznie bazowe

5:22styles winda, które możemy sobie teraz wykorzystywać w naszym projekcie.

5:27Tu jest standardowy config w tagu inta.

5:29Jeżeli chodzi o te extended wszystkie to też nie potrzebujemy tego.

5:33Możemy sobie to na chwilę obecną wszystko

5:36wyczyścić żebyśmy mieli nasz projekt czysty.

5:39Tutaj po prostu jeżeli chodzi o plugin musimy skonfigurować sobie z jakich

5:43folderów będzie to Alu Inc odczytywał pliki do tego, żeby tworzyć style,

5:48które później wylądują bundle na Twojej aplikacji.

5:52Dlatego tutaj określamy foldery Pages,

5:54components i app wszystkie pod foldery, które będą śledzone przez te alu Inc.

5:59Dzięki temu będziemy mogli mieć jakby tworzone style w zależności od tego

6:06w jakim pliku się znajdujemy, w którym folderze zapiszemy nasz plik.

6:11Jeżeli chodzi o global CSS też sobie zapiszemy.

6:13Layout mamy wyczyszczony.

6:15Taka standardowa konfiguracja z linka

6:18jeżeli chodzi o konfigurację pliki, ale to za chwilę do tego przejdziemy.

6:24Post css config też standardowy, który tutaj mamy.

6:27Tak naprawdę żadnej rewolucji tutaj nie ma i jeżeli teraz

6:31sobie wszystko zrobiliśmy dobrze, to po uruchomieniu tego projektu powinniśmy

6:35zobaczyć to, co wpisaliśmy sobie tutaj w page'u, czyli Hello from Pocket up.

6:39To jest nasza strona źródłowa, która

6:41powinna nam się wyświetlić bez żadnych sobie, tylko z bazowymi styli stylami CSS.

6:47Przejdźmy teraz do do.

6:49Uruchomimy naszą aplikację.

6:51Zobaczmy czy tak naprawdę uruchomi się i teraz npm runde.

6:56W tym momencie aplikacja powinna uruchomić się na serwerze localhost 3000.

7:00Jeżeli sobie przejdę teraz do mojej

7:02przeglądarki internetowej, uruchomię tutaj nowe okienko i włączymy localhost 3000.

7:07No to już po chwili mamy Heloł from po.

7:11Czyli taka pierwsza bazowa konfiguracja.

7:14Przygotowania do naszej dalszej pracy mamy za sobą.

7:16Teraz przejdźmy do następnych części,

7:19które będą potrzebne do tego, żeby odpowiednio pracować z tym projektem.