[zboinek]

#webdev #react
Zebraliśmy się tutaj, żeby porozmawiać o najnowszej aktualizacji #nextjs a tak na prawdę to o strukturze plików w waszym projekcie.
Nowa wersja nextJS wprowadza folder /app, w którym routingi do kolejnych podstron będą folderami, które z kolei będą zawierały odpowiednie pliki. I tak, każdy taki folder będzie zawierał np. page.js.

Ogólnie już od dawna widziałem trend, że np. komponent to folder/index.js i wtedy masz latwiejszy import bez podawania nazwy pliku ale...
no właśnie ale, ale ja nienawidze mieć na górnej belce z plikami index.js/index.js/index.js/index.js/index.js/index.js/ i to samo tyczy się ctrl+p, które zazwyczaj służy mi do przeskakiwania między plikami - chociaż tu już od jakiegoś czasu brany jest też pod uwagę folder.

Tak więc:
1. Jak wy to robicie?
2. Co sądzicie o nowościach w next?

[spunky]

@zboinek: ja tam lubię index.js w katalogach z komponentami, ale służą one tylko i wyłącznie do eksportów. Zasadniczo nawet ich nie ruszam, bo mam tool, który mi je tworzy.

Na jakimś projekcie miałem komponenty bezpośrednio w index.js. Myślałem, że się potnę.

[Melcma]

@zboinek: zamiast index.js nazwij component tak jak sie nazywa folder,

np folder button/
button.ts
button.css
actions.ts
button.test.ts

[zboinek]

@Melcma: no dobra ja tak właśnie robię ale nowy next niejako wymusza na tobie tworzenie page.js bo to jest zaszyte we frameworku

@spunky: wszystkie komponenty w 1 pliku? xD

[spunky]

@zboinek: ComponentName/index.js

Można #!$%@? dostać. Same index.js

[Melcma]

@zboinek: a takie cos? https://stackoverflow.com/questions/39598007/showing-path-in-file-tabs-in-visual-studio-code/50181247#50181247

[ujdzie]

@zboinek: nie chciało mi się jeszcze 13 odpalać, ale mam 2 podejścia:
- a index do eksportu jak spunku
- catch all jeżeli się da [[...cokolwiek]].ts

[zboinek]

@spunky: a że w ten sposób, no to faktycznie jeśli index weźmiesz tylko do exportów to może być trochę lepiej.

[spunky]

@zboinek: no u mnie to zwykle wygląda tak (dla przykładu RN):

components/ 
 - SuperButton/
 -- index.js
 -- SuperButton.js
 -- SuperButton.styles.js

w takim folderze trzymam też inne rzeczy, które są używane tylko i wyłącznie w danym komponencie. Jakieś subkomponenty itp. wtedy dodaje np podkatalog components.

Zrobiłem sobie małego toola, który mi tworzy cały katalog z odpowiednimi nazwami, importami, eksportami, więc nie grzebie się w boilerplejcie. Mi taki układ pasuje.

Do tego mam

[zboinek]

@ujdzie: a xD to tego nie widzialem

[zboinek]

@spunky: wygląda znośnie ;) styles jeszcze piszesz? nie przeszedles na tailwinda?

[spunky]

@zboinek: To react native.

Tailwinda miałem na jakimś projekcie. Możecie go sobie wsadzić w dupę a nie do mojego kodu xD

Co ja piszę komponent czy rozprawkę o tym, jak on ma wyglądać. Jeszcze tylko nasrać do tego.

[zboinek]

@spunky: zajebisty jest :D bym nawet powiedział, że zmienił moje życie

[spunky]

@zboinek: ( ͡° ʖ̯ ͡°)

[zboinek]

@ujdzie: widzę, że tool do automatycznego #!$%@? tez nie dziala :p

[ujdzie]

@zboinek: ja już nawet zapomniałem, że mieli usuwać `` z poł roku temu, wciąż nie ogarnęli?

[BrotatyChleb]

@spunky: dej toola, bo tylko o nim mysle, a nie chce mi sie pisac samemu xD

[zboinek]

@ujdzie: No to w teorii już działa bo po upgrade rzucało errorami ze mam w Linkach.
@BrotatyChleb: tutaj jest https://nextjs.org/blog/next-13#nextlink ale nie działa xD

[BrotatyChleb]

@zboinek: pytalem o toola do folderow i plikow ( ͡° ͜ʖ ͡°)

[zboinek]

@BrotatyChleb: aaaaaaaaaaaa ;) znając życie to customowy tool zrobiony na własny użytek nie będzie zbyt użyteczny dla osoby trzeciej. Ja to sobie ograłem snippetami i templatami

[BrotatyChleb]

@zboinek: troche dostosowałem pod siebie i jest git ( ͡° ͜ʖ ͡°)

PS: pisałem do kogoś innego xD