Next.js Discord

Discord Forum

hello can i get some help plz i want the navbar evenly spread out

Answered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
i've tried everything still not working
Answered by Saltwater Crocodile
exactly
View full answer

106 Replies

Giant ChinchillaOP
Giant ChinchillaOP
no ones helped yet..
Saltwater Crocodile
hey @Giant Chinchilla make parent div justify-between / justify-evenly or justify-around
<ul className="my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
@Saltwater Crocodile hey <@280265139847168000> make parent div justify-between / justify-evenly or justify-around
Giant ChinchillaOP
hi i've tried, but half my code is in tailwind and the other half is in global.css
Saltwater Crocodile
but the navbar lloks like tailwind too me
Giant ChinchillaOP
just too confusing for someone like me that doesn't really get tailwind
Saltwater Crocodile
tailwind is really a gamebreaker, the utility classes make css in application so much easier
Giant ChinchillaOP
okay, doesn't seem that great to me. Its just like writing out same css code but in the html
Saltwater Crocodile
yes but it makes it really easy
Giant ChinchillaOP
whats the point in doing that ... isn't the idea to keep code clear. why jam css and html together
now its just a big mess lol
Saltwater Crocodile
haha stick to regular css then
For me it's a blessing
haha
but i guess mixing regaular css with tailwind isn't that good of a idea
Giant ChinchillaOP
for 1000 lines of 10 components of jsx code do you jam it all in one jsx file? or do you split it up into different files?
same goes with tail-wind like why jam 1000 lines into one page
Saltwater Crocodile
The advantage of react are components so the whole code is split in many components
Giant ChinchillaOP
why not split it into 2
Saltwater Crocodile
for your code i would put the navbar in a different componentn and then just import the component into a layout file
or directly in the page
Giant ChinchillaOP
yet i have the navbar in a different file
Saltwater Crocodile
but it is in the page.tsx
file
which is a route and not a component
Giant ChinchillaOP
just got to get a hang of this tail-wind thing
Saltwater Crocodile
haha
yes
but when you do
You will never go back
trust me
Giant ChinchillaOP
ay
Saltwater Crocodile
:)
Giant ChinchillaOP
its next.js
in order to split the components you have to make new folders? with page.tsx
am i doing it wrong?
Saltwater Crocodile
no
Giant ChinchillaOP
no thats wrong or no im not doing it wrong lol
Saltwater Crocodile
so in the app directory is where to routes are
so for example if you have a signup page
Its like this
app -> signup -> page.tsx
now when you create a form
You create that in a path like this for exampler
src -> components -> forms -> SignUpForm.tsx
then all of the form code goes in there
and then you render this component in the page.tsx
Giant ChinchillaOP
this is next.js right
Saltwater Crocodile
yes
with an import
and then lkike this
<SignUpForm/>
thats the structure you normally go for
This way all of the code and components are separated and they are reusable
Giant ChinchillaOP
oh shit i don't get it
Saltwater Crocodile
okay look
Giant ChinchillaOP
ls -R --ignore='node_modules'
.:
README.md          postcss.config.js
img                server
next-env.d.ts      src
next.config.js     tailwind.config.ts
package-lock.json  tsconfig.json
package.json

./img:
tom.png

./server:
server.js

./src:
app

./src/app:
globals.css  home  layout.tsx  nav  page.tsx

./src/app/home:
page.tsx

./src/app/nav:
page.tsx
Saltwater Crocodile
This is my main page.tsx
in there the ladningNav and the LandingMain get renderer
Giant ChinchillaOP
is this next.js?
Saltwater Crocodile
yes
Ahnd this is the LandingNav component
Which is rendred in the page.tsx
with the import
Giant ChinchillaOP
write
so is the next.js automatic file routing actually working here?
Saltwater Crocodile
what you mean with automatic routing?
Giant ChinchillaOP
well thats what next.js does right? You get automatic file routing
Saltwater Crocodile
i guess
So for every folder that is created in the app direcotry
there is a new route
if you mean that
Giant ChinchillaOP
nah i don't know how really sorry, just that there's so automatic file routing going on lol
Saltwater Crocodile
hey watch a turotial that shows you the concepts of react components
Then you will get the hang of it
Giant ChinchillaOP
when i read the docs it seemed to me that if you were to create a new component then you make a new folder with that components name as the folder name. and then make a page.tsx file inside that
Saltwater Crocodile
yes you can go that route
Giant ChinchillaOP
well i had the hang of it until they changed everything around
Saltwater Crocodile
But the best practice is to create a new Component for every part of your application
So for example a navbar, a table, a form all go into separate components
and then get imported at the specific pagte
where it is necessary
Giant ChinchillaOP
so i make components/navbar.tsx
but where is the page.tsx. its got a lot of page.txs 's in the docs
Saltwater Crocodile
yes
so for every toute (folder) in the app direcotry the is a page.tsx inside
which renders this page
and into this page.tsx all the necessary components will get imported
look at my example above
Giant ChinchillaOP
so you have just one big folder components with 10 different components in there?
Saltwater Crocodile
i mean you can separet them to your likings
the folder also doensn't need to be named components
Giant ChinchillaOP
thats like the vanilla react way of doing it?
Saltwater Crocodile
this is just a good practice
yes
except of the routing
which is way more easier in next
Giant ChinchillaOP
okay ill look into it
is your repo public?
KINXZ
basically you have to make your structure with the directories and pages the way the url is:

example: http://localhost:3000/dashboard

📁app
  📁dashboard
    ⚛️page.jsx


example: http://localhost:3000/dashboard/team

📁app
  📁dashboard
    ⚛️page.jsx
    📁team
      ⚛️page.jsx
Giant ChinchillaOP
okay thanks
Saltwater Crocodile
exactly
Answer