So we learn the basics about next
but what is if I still want to compose my application from components and not just pages, should I not
do that anymore?
We absolutely should.
The way you build your react application doesn't change,
it's still a good practice to compose your application of many small pieces.
So let's add a new folder, components and this folder name actually is up to you,
nextjs to doesn't care about that,
you could name it C, CMP, whatever you want. In there,
I'll add my user.js, a user component,
I'll create a constant user, get some props maybe and then output some jsx and for that I'll of course
as always import react from react like that and export this user constant as the file default. In
here
we can now create a new div where I want to output some user data like for example the name which I expect
to get via props
and then let's say also the age, props.age.
That's a very simple component of course deliberately because we're not pulling components,
I want to show you how to use that in the nextjs application.
Now once we got that, once we get this component, we use it as always,
let's say we want to use in the authIndex.js file,
we simply import user from
now let's go up and let's go up to the components folder and there import the user file and I then
simply add my user component like this,
passing the name props since I expect this and the age prop which is the number like that, this is how I can use
this.
Now if we save all the files and we go back,
you already see it here
Max 28.
So we still work with components in our nextjs application,
we just have the special pages folder which also contains components, functional or class based ones but
which is the only folder which gets some special treatment because nextjs as we'll parse all the files
in their as pages, create routes for them and automatically code split.
By the way that code splitting of course also includes components included in that page like the user
component,
we only use that in the auth component, in the authindex.js file
so we only load the code for it
if we navigate to that page. If we spend our entire time on the main index.js page where we don't
use the user component, we would never load the code for this either.