Nuxt.js – Introduction by Project

00:00:02 welcome to this video where i want to
00:00:04 introduce you to
00:00:05 next js now what is next js
00:00:12 next js is a library for vue.js so let's
00:00:17 quickly have a look at this first what
00:00:19 is vue.js
00:00:20 now i already got a series and a course
00:00:22 on that which i strongly recommend
00:00:24 checking out before diving into next.js
00:00:26 but here's the brief overview vue.js is
00:00:29 a front-end javascript framework
00:00:31 you use it to build single-page
00:00:34 applications or to enhance existing
00:00:36 multi-page applications
00:00:38 by controlling parts of your page or the
00:00:41 entire page
00:00:42 through javascript and they're
00:00:43 specifically through view chairs which
00:00:46 gives you a lot of helper and utility
00:00:47 functions
00:00:48 that makes the creation of front-end
00:00:51 applications running in the browser
00:00:52 easier now it's a mixture of angular and
00:00:56 react
00:00:56 from a syntax perspective you could say
00:00:59 it allows you as i said to build widgets
00:01:02 and single page applications
00:01:04 it includes a router and a state
00:01:06 management system
00:01:07 view x hence turning it or making it a
00:01:10 real
00:01:11 complete framework and not just a
00:01:13 library for building components as react
00:01:16 would be one
00:01:17 it's very lightweight that's a huge plus
00:01:20 of view chairs
00:01:21 and it is extremely popular now you
00:01:24 might already know all of that
00:01:25 so let's now dive into nux chairs what
00:01:28 is that
00:01:29 as i said it's a library building up on
00:01:31 view chairs and that is super important
00:01:33 to understand
00:01:35 the question of course just is why do i
00:01:37 need
00:01:38 a framework for a framework if
00:01:41 view js already makes the development of
00:01:44 javascript apps easier what's the idea
00:01:48 behind next
00:01:49 does it make the development of vue.js
00:01:51 applications easier
00:01:53 the answer would be yes it simplifies
00:01:55 the development of
00:01:56 vue.js applications and not because
00:01:59 vue.js is so difficult it actually isn't
00:02:02 but because there are some things which
00:02:05 can be made easier
00:02:06 for example that's one major focus of
00:02:09 next.js
00:02:10 the creation of universal apps with
00:02:13 universal
00:02:14 i simply mean apps that are also
00:02:16 rendered on the server
00:02:18 now that is important to understand as
00:02:20 it's
00:02:21 often misunderstood we don't use
00:02:24 vue.js and we also don't use next.js
00:02:27 on the server as we do use express or
00:02:30 hoppy
00:02:31 or adonis js or something like that it's
00:02:34 not a server-side framework
00:02:36 it just allows us to pre-render views on
00:02:39 the fly
00:02:40 on the server so if you're visiting some
00:02:42 page in your vue.js
00:02:44 single page application and you enter a
00:02:47 url
00:02:48 typically what you get is the index.html
00:02:50 file and then a single page application
00:02:52 where everything is rendered in the
00:02:54 browser now you can pre-render things
00:02:56 as i said on the fly on the server and
00:02:58 next.js makes that easier
00:03:00 more on that in a second another thing
00:03:03 where
00:03:04 next.js helps us and makes things easier
00:03:06 is the setup of
00:03:08 routes and of the entire project in
00:03:10 general
00:03:11 in next.js applications you configure a
00:03:14 lot
00:03:15 simply by creating a folder structure
00:03:17 with files in it
00:03:18 for example routing as you will see in
00:03:21 this video you simply create a bunch of
00:03:23 folders and subfolders
00:03:24 and these will be converted into your
00:03:28 routes
00:03:28 of your view application because that's

00:03:31 another important
00:03:32 thing you still build a viewer
00:03:34 application in the end
00:03:35 next builds up on view it doesn't
00:03:38 replace it
00:03:39 so we stick to the view world but gain
00:03:42 some extra tools and utilities so in the
00:03:45 end
00:03:45 it simplifies the development of view
00:03:47 apps it's
00:03:48 totally optional and since it mostly
00:03:51 simplifies things during the development
00:03:54 it also doesn't add much to the file
00:03:57 size of your project so you don't gain
00:04:00 a lot of weight you simply just gain a
00:04:02 lot of features
00:04:03 during development while still deploying
00:04:06 a view app
00:04:06 in the end with some overhead with some
00:04:09 extra kilobytes to be downloaded
00:04:11 but also with some new capabilities like
00:04:14 the server-side rendering
00:04:16 now let's dive into all of that and
00:04:18 let's take a closer look at
00:04:19 how this works in reality and not just
00:04:22 on the slide
00:04:23 however there is one more thing i want
00:04:25 to show you on a slide and that's the
00:04:26 server-side rendering part
00:04:27 because it's so crucial to get that
00:04:29 right
00:04:31 i already said we're building a single
00:04:33 page application with
00:04:34 viewjs so we're building an application
00:04:37 that runs
00:04:38 in the browser that's super important to
00:04:40 understand it's a client-side framework
00:04:43 how does server-side rendering fit in
00:04:45 there
00:04:46 let's consider this case we have our
00:04:48 user you
00:04:49 and you're visiting a website which is
00:04:52 built with
00:04:52 vue.js so you send a request to a server
00:04:55 by entering a url for example
00:04:58 now typically you would get back a
00:05:00 response and if you have a single page
00:05:02 application
00:05:03 that response is the index.html file
00:05:06 which contains your view app
00:05:07 it contains a bunch of scripts importing
00:05:09 the view app you could say
00:05:11 from that point on everything runs in
00:05:13 the browser and if you click around in
00:05:15 that application
00:05:16 you never send a new request you never
00:05:19 send
00:05:19 or get back a new response or if you do
00:05:23 these will be behind the scenes ajax
00:05:25 requests and responses
00:05:26 so you always stay on that index.html
00:05:29 file and the view app the
00:05:31 viewchairs framework simply re-renders
00:05:33 the parts of your page
00:05:35 that needs to be re-rendered to reflect
00:05:38 the new
00:05:39 url you are now on even though it's
00:05:41 technically the same page
00:05:44 now the problem with single page
00:05:45 applications is
00:05:47 that if you have a page let's say a blog
00:05:50 where you get a lot of posts that are
00:05:52 fetched from a database
00:05:54 what would happen is that you got the
00:05:55 index.html file with the view app
00:05:58 and once it starts in the browser once
00:05:59 it runs in your browser
00:06:01 it starts fetching the blog posts behind
00:06:04 the scenes with the ajax request
00:06:06 and it will render them to the screen
00:06:07 once they're there from a ui
00:06:09 or from a user experience perspective
00:06:11 that is fine
00:06:13 from a search engine perspective this is
00:06:15 problematic
00:06:16 because the search engine crawler won't
00:06:19 wait for the data to return
00:06:21 so all the crawler will see is an empty
00:06:23 page
00:06:24 or just the spinner or whatever you're
00:06:26 showing there
00:06:27 now this is where server-side rendering
00:06:29 can help you you're not creating a
00:06:31 server-side app you're not having a
00:06:32 replacement for express or something
00:06:34 like that here
00:06:35 instead the index.html file which
00:06:38 contains your view app
00:06:39 can be pre-rendered on the server for
00:06:42 each new request

00:06:43 so not when you click around on the app
00:06:45 so when the user is using your page
00:06:47 but whenever a new url is entered and
00:06:50 you hit
00:06:50 enter or you hit refresh in your browser
00:06:53 and the search engine crawler
00:06:54 effectively does
00:06:55 just that it visits different urls and
00:06:58 each url
00:06:59 is a brand new fetch of your page for
00:07:02 these requests
00:07:03 we can pre-render the index.html file to
00:07:06 execute that
00:07:07 initial view code that should run not in
00:07:10 your browser
00:07:11 but on the server that is the key thing
00:07:14 we pre-render it on the fly upon the
00:07:17 request
00:07:18 for the first load only that's important
00:07:21 for the first load only
00:07:23 thereafter we again have a single page
00:07:25 application running in the browser we
00:07:27 still have a normal view application
00:07:29 so if you then click around in this
00:07:30 pre-rendered page
00:07:32 you still send your ajax requests and
00:07:34 you have view manage everything
00:07:36 but that first request is pre-rendered
00:07:38 on the server
00:07:39 you can do that without nexjs you can
00:07:42 find a link to the official server-side
00:07:43 rendering guide
00:07:44 of the vue chairs framework in the
00:07:46 description below
00:07:48 but setting it up manually is a lot of
00:07:50 work and not that much fun
00:07:52 next js helps you with that that's
00:07:54 exactly what naxxjs does
00:07:56 it helps you with that pre-rendering of
00:07:58 that first initial page
00:08:01 and besides that whole server-side
00:08:03 rendering stuff it also makes the
00:08:05 creation of
00:08:06 your app simpler because it uses that
00:08:08 configure
00:08:09 a lot by creating folders and files
00:08:11 approach which we'll have a look at
00:08:13 so this is what nextjs does this is what
00:08:15 the server-side rendering does mean here
00:08:17 now let's take a look and let's simply
00:08:19 create a next step to get a better
00:08:21 feeling for what happens
00:08:22 and to leave that world of theory here
00:08:25 to create a new next app i will use
00:08:28 create next app
00:08:29 which is like a cli you could say it is
00:08:32 a tool
00:08:32 which you execute from the command line
00:08:34 from the terminal on mac
00:08:36 which makes the creation of next app
00:08:39 simpler
00:08:40 and it's available for or it will work
00:08:42 for both mac linux and also for windows
00:08:45 of course
00:08:45 so it works there in all these
00:08:47 environments you can simply google for
00:08:50 create next app and you should find this
00:08:52 github repository here
00:08:54 from the next community and on that
00:08:56 github page
00:08:57 you can find detailed instructions and
00:08:59 also installation instructions
00:09:01 now we will actually use a third way of
00:09:03 installing it which you don't see on
00:09:05 that page
00:09:06 and we will use node.js which you need
00:09:08 under all circumstances
00:09:10 because the project created with this
00:09:12 cli tool here
00:09:14 will have a development server so that
00:09:16 you can preview your application
00:09:18 and that development server will use
00:09:20 node.js as a
00:09:22 language so we need node.js
00:09:25 and you can get it from nodejs.org
00:09:28 there you can simply download the latest
00:09:30 version or the long term stability
00:09:33 version if you're facing issues with the
00:09:34 latest one
00:09:35 though if you don't then i would
00:09:37 recommend using the latest one
00:09:39 and we will use it for the development
00:09:40 server and because we're interested in
00:09:43 nodes package manager npm which i will
00:09:46 use
00:09:46 to install create next app once you ran
00:09:49 through
00:09:50 the node installer and got npm also
00:09:52 installed you can execute npm install
00:09:54 dash

00:09:55 g create next
00:09:59 app that's the name of the package this
00:10:01 tool i was just talking about and
00:10:04 on mac and linux you probably need to
00:10:05 add a sudo in front of that to get the
00:10:07 right permissions
00:10:09 and once that is running it will
00:10:10 download that tool and install it
00:10:12 globally on your machine so you only
00:10:14 need to execute this command once
00:10:16 and no second time thereafter unless you
00:10:19 want to update it
00:10:20 you can now use it anywhere on your
00:10:22 machine so now it was installed
00:10:24 you can now navigate in the terminal or
00:10:26 command prompt
00:10:27 into the folder where you want to create
00:10:28 your next project and i
00:10:30 already am in this folder so i will now
00:10:33 just run create
00:10:34 dash nux dash app so the name of that
00:10:36 package we just installed
00:10:39 my first next app or whatever name you
00:10:43 want to use
00:10:44 maybe since i want to use a very simple
00:10:46 recipe
00:10:47 application i will name it recipes but
00:10:50 the name is up to you
00:10:51 you hit enter and now you're asked a
00:10:53 couple of questions like a project name
00:10:55 i'll confirm the default which you see
00:10:57 here between the parentheses with
00:10:59 enter description my
00:11:04 awesome recipe book app
00:11:08 you can now choose a custom server-side
00:11:10 framework and that can be confusing
00:11:12 now i said that next would not be a
00:11:15 replacement for express and so on
00:11:17 and it isn't but you can integrate it
00:11:19 with express
00:11:20 or also with no server-side framework in
00:11:23 this case
00:11:23 next will alter for production not not
00:11:26 just for development
00:11:27 give you a node server which you deploy
00:11:30 because it of course
00:11:31 needs a node server to be able to
00:11:33 pre-render
00:11:34 your pages on the fly and it only runs
00:11:37 on node that's always important
00:11:39 you can't use it with php or anything
00:11:41 like that so i will use
00:11:43 non here i don't want to have another
00:11:45 server-side framework because i don't
00:11:47 want to write any server-side code here
00:11:49 i just want to get that pre-rendering
00:11:51 capability
00:11:52 so i will pick none here now we could
00:11:55 also choose a custom ui
00:11:56 framework and these are really component
00:11:59 libraries
00:12:00 where we could easily integrate things
00:12:02 like a date picker and so on into our
00:12:04 project
00:12:05 i don't want one of these either so i
00:12:07 will also pick none here
00:12:10 and now we can choose the default
00:12:11 rendering mode which you can change
00:12:13 after the project has been created
00:12:16 you could still create a single page
00:12:17 application hence you would not use the
00:12:20 server side rendering capabilities
00:12:22 you would still benefit from that
00:12:25 configure everything with
00:12:27 files and folders approach but i also
00:12:30 want to get that server-side rendering
00:12:32 advantage or feature so i will pick
00:12:35 universal here which simply means the
00:12:37 app then supports both the client and
00:12:39 the server side
00:12:40 though technically it still is a
00:12:42 client-side focused app
00:12:44 you just got that server-side
00:12:45 pre-rendering capability
00:12:47 so i will pick universal here now next
00:12:49 you could
00:12:50 automatically include axias into your
00:12:53 project
00:12:54 axias is a javascript library which you
00:12:56 can use to send ajax requests
00:12:58 but we can also install that separately
00:13:00 if we wanted to so i will hit
00:13:01 no here you can enable linting here i
00:13:04 will also hit no here and you can enter
00:13:06 your offer name here just to store it in
00:13:10 the configuration
00:13:11 next you can choose the packager manager
00:13:13 you want to install if you got multiple
00:13:15 ones installed
00:13:16 now i also got yarn installed but i will

00:13:18 stick to npm
00:13:19 and that will now create a new next
00:13:22 project with the
00:13:23 bare minimum settings which are
00:13:26 basically what you will start with in a
00:13:28 lot of projects
00:13:29 so let's wait for this to finish and i
00:13:31 will back once it is done
00:13:33 so the setup finished and now we see the
00:13:35 commands we can execute here
00:13:36 so let me navigate into that newly
00:13:38 created folder with cd recipes
00:13:41 and now here we can run npm run dev to
00:13:44 start that development server
00:13:46 now this will start at localhost 3000 by
00:13:49 default
00:13:50 it also prints the address here
00:13:53 and you can now simply visit that
00:13:54 address so i entered it in the browser
00:13:57 and you should see something like that
00:13:59 a default next app basically a starting
00:14:02 screen it gives you out of the box
00:14:04 now let me also quickly open this in an
00:14:06 ide
00:14:07 i will use visual studio code here in
00:14:09 this video
00:14:11 and there it should look something like
00:14:13 this this is the folder and file
00:14:15 structure a next project has
00:14:17 out of the box and if you have worked
00:14:19 with vue.js
00:14:20 only thus far then this will look quite
00:14:23 differently
00:14:24 the reason for this is you still create
00:14:26 a view js application
00:14:28 but a lot of things you had to configure
00:14:30 and wire up manually
00:14:32 in your view apps mainly related to the
00:14:35 routing
00:14:35 is now done for you the core
00:14:39 concept of a next app which i absolutely
00:14:42 want you to remember
00:14:43 is that pages folder here
00:14:46 in that pages folder you create your
00:14:49 routes
00:14:50 by naming your files and folders in
00:14:52 there appropriately
00:14:54 every dot view file in that pages folder
00:14:58 will be considered as a route
00:15:00 and you can also nest routes and create
00:15:02 more complex paths
00:15:04 by creating subfolders let me show you
00:15:07 what i mean
00:15:07 if i add an about dot view file
00:15:11 and these should be dot view files for
00:15:13 normal single file view components as
00:15:15 you probably
00:15:16 know them from your own view project if
00:15:18 you create such a about the view file
00:15:21 file you can simply add a template in
00:15:23 there and in the template
00:15:24 you could output an h1 tag where you say
00:15:28 the about page
00:15:33 something like that now if i save this
00:15:35 about dot view file
00:15:37 and i go back to my project here then
00:15:40 i can go to my url and enter slash about
00:15:44 now this will load this page i just
00:15:46 created you
00:15:47 might need to reload once if you just
00:15:49 added that page
00:15:50 and it will print out the about page
00:15:53 here so it loads
00:15:55 this content this view component here
00:15:59 in the about.view file as my
00:16:02 main component through the view router
00:16:04 behind the scenes
00:16:06 because i added an about.view file here
00:16:09 each file is interpreted as a route here
00:16:13 index simply is the root route for just
00:16:15 slash nothing
00:16:16 and slash about would be forwarded to
00:16:18 about.view
00:16:20 an alternative by the way if i cut that
00:16:22 content here and remove the file
00:16:24 an alternative is to create a subfolder
00:16:26 about
00:16:27 and in that subfolder i could create an
00:16:29 index.viewfile again
00:16:31 if i now save this and i reload the
00:16:33 previous page
00:16:35 then it will still work because this
00:16:37 yields the same result in the end
00:16:40 a folder is also interpreted as a path
00:16:42 segment
00:16:43 and the index file in a folder will
00:16:46 simply be loaded if you enter nothing
00:16:48 else and if you get no other dot view
00:16:50 files in that folder
00:16:51 and i personally prefer this folder

00:16:54 based approach because i believe or i
00:16:56 think
00:16:56 it makes the structure a bit more
00:16:58 understandable this way
00:17:00 so this is how you create routes and
00:17:02 that is the second core
00:17:04 feature of next.js we also get a couple
00:17:06 of other
00:17:07 folders here which you use for different
00:17:09 features we will have a look at
00:17:11 some of them in this video but the pages
00:17:13 folder is the most crucial one
00:17:15 you create your routes through the view
00:17:17 router without writing
00:17:19 any single line of configuration code
00:17:22 just by creating folders and files
00:17:24 and now if you inspect the source code
00:17:27 of that loaded page by right clicking
00:17:29 and then viewing the page source
00:17:34 then you will see that if you scroll
00:17:36 down
00:17:37 that this is actually pre-rendered
00:17:40 you can see it here
00:17:44 the about page now this might look
00:17:47 trivial because that is what you entered
00:17:49 here right
00:17:50 but if you create a normal view app
00:17:52 without
00:17:53 next and you dare inspect your page
00:17:56 source
00:17:57 you will basically see an empty
00:17:59 index.html file
00:18:00 with a bunch of script imports you see
00:18:03 these
00:18:04 script imports here too because after
00:18:06 the first load it becomes a single page
00:18:08 application
00:18:09 but this first page is pre-rendered on
00:18:12 the fly
00:18:12 just before you or just write after you
00:18:15 request it
00:18:16 on the server as is confirmed by the
00:18:18 fact that the content is in the file
00:18:20 which you download from the server
00:18:22 if it would be added after the initial
00:18:25 load
00:18:25 then this source code wouldn't have been
00:18:28 touched because
00:18:29 javascript changes are reflected in
00:18:31 there this is really the file you got
00:18:32 from the server
00:18:34 so these are the two main features of
00:18:37 next
00:18:37 the server side rendering and the
00:18:39 navigation or the routing
00:18:41 by folders and files now
00:18:44 let's build up on that and let's create
00:18:46 a very very
00:18:48 very simple page here where we have some
00:18:51 recipes to look at
00:18:52 and if you want to learn more about nux
00:18:54 and dive a bit deeper i got a whole
00:18:56 course on that where i walk you through
00:18:57 the different core features and give you
00:18:59 a more
00:18:59 photo introduction to next.js a link is
00:19:02 of course in the video description
00:19:04 so let's create a new subfolder in the
00:19:06 pages folder and let's name it
00:19:08 recipes and in there i'll add an
00:19:10 index.viewfile
00:19:11 now my goal is to show very very simple
00:19:15 previews of recipes we could cook in in
00:19:18 there
00:19:18 and if we click one we load a detail
00:19:20 page which will also be very simple in
00:19:22 this video
00:19:23 but which will allow us to see naxjs in
00:19:26 action
00:19:27 so in the index.view file in the recipes
00:19:29 folder i'll add a template
00:19:31 and in that template here i well when i
00:19:33 display my index
00:19:35 my recipes so i'll add a section maybe
00:19:38 give that section a class of
00:19:39 recipes and in there i want to have a
00:19:41 couple of a couple of
00:19:42 article elements so these are normal
00:19:46 html elements of course and each article
00:19:49 let's say
00:19:50 could have um like a div where we have a
00:19:53 preview image
00:19:55 could have ih1 tag for the title
00:19:58 and could then maybe have a paragraph
00:20:01 where we have some nice
00:20:04 preview text
00:20:07 now since we're creating a normal view
00:20:09 application a new view component here
00:20:11 in the index.u file we can of course
00:20:13 also add some styles

00:20:15 and we can add the scoped keyword to
00:20:18 scope the styling we set up here to just
00:20:20 this component and therefore to this
00:20:22 page
00:20:23 so in there i now want to add my recipes
00:20:26 class which i'm
00:20:27 referencing in the template and in there
00:20:30 i will have my article which is just a
00:20:33 recipe
00:20:34 and actually i also want to style that
00:20:38 and let's say a recipe has a very simple
00:20:40 style
00:20:41 box sizing of border box to make sure
00:20:45 the width and so on is correct
00:20:46 give it a width of let's say 280
00:20:50 pixels maybe give it a padding of
00:20:54 8 pixels give it a border of
00:20:58 1 pixel solid and a light gray maybe
00:21:01 and some box shadow of zero
00:21:04 then two pixels uh as a second value
00:21:07 then maybe two
00:21:08 pixels again and a darker gray
00:21:12 excuse me darker gray like this and the
00:21:15 exact styling is of course totally up to
00:21:16 you
00:21:17 now if we take a very quick look at
00:21:21 slash recipes like this
00:21:25 and for the first time you need to
00:21:26 reload this page this is what it will
00:21:28 look like
00:21:29 now i want to have an image above it and
00:21:31 of course i want to have multiple
00:21:32 recipes
00:21:33 so let's quickly copy that recipe here
00:21:37 add it below the first one and save that
00:21:41 file you get live updating here always
00:21:43 make sure you keep that process running
00:21:45 by the way which you started with npm
00:21:47 run dev
00:21:48 so now we got a second recipe and i want
00:21:50 to position them next to each other
00:21:52 so i'll give the wrapping recipes
00:21:55 container here
00:21:56 a display of flex to use flexbox and
00:21:59 set the flex flow to
00:22:02 row and give it also the wrap
00:22:06 property to make sure we wrap the
00:22:08 content if
00:22:09 our page uh with dozens of files so if
00:22:12 we are in a smaller page
00:22:14 this will automatically wrap to have
00:22:16 very basic responsive styling here
00:22:18 okay so these are the two basic recipes
00:22:21 now i want to have an image
00:22:22 so let's quickly search for food and
00:22:24 feel free to pick
00:22:26 any image that looks delicious to you so
00:22:28 we'll grab the url of this image which
00:22:30 looks quite tasty
00:22:32 and i want to use it as a background
00:22:34 image for that div in my
00:22:36 recipe here so why don't we give
00:22:39 that div you're in both instances a
00:22:42 class
00:22:42 of thumbnail
00:22:46 and then also inline style which we can
00:22:50 later set dynamically if we want to
00:22:53 which sets a background image where we
00:22:55 set some url
00:22:57 like this and simply reference the url
00:23:01 now we can style the thumbnail class
00:23:03 here to position that
00:23:05 background image correctly
00:23:08 by setting background
00:23:15 position to center and background
00:23:19 size maybe to cover now if we save this
00:23:22 and we go back to our application
00:23:25 we still don't see anything because what
00:23:27 we also need to do is
00:23:28 set a width of 100 and a height
00:23:31 of let's say 200 pixels if we do that
00:23:35 and we go back we see our image there
00:23:38 now this is now my preview image of that
00:23:41 recipe the recipe itself could also use
00:23:44 some
00:23:45 margin to have some distance to the next
00:23:46 recipe in my opinion so let's add a
00:23:48 margin of 10 pixels to all directions
00:23:50 looks better and of course i want to
00:23:52 have a different image for
00:23:54 the second recipe so let's search one
00:23:57 other image
00:23:58 maybe some no not this one this one
00:24:01 looks quite good
00:24:05 so with this one selected let's go back
00:24:07 and add it to this url and as i said we
00:24:10 can of course set this dynamically by
00:24:12 binding the style property just as you
00:24:14 can do it in any
00:24:15 view app and with that we got this

00:24:19 exchanged so this is taking shape
00:24:22 now one thing i want to do in the
00:24:23 recipes here i want to change the
00:24:25 positioning
00:24:26 so i'll set justify content which is a
00:24:28 flexbox property
00:24:29 choose center and align
00:24:32 items also to center to center them
00:24:36 horizontally and vertically in their
00:24:39 flexbox not on the entire page so this
00:24:41 gives me this look
00:24:42 so this looks quite nice now one thing
00:24:44 we can of course do in next apps too
00:24:46 and that is something i definitely want
00:24:48 to show you we can of course
00:24:50 still create normal view components
00:24:52 which are not used as pages
00:24:55 to construct our app from them for that
00:24:57 we got this components folder
00:24:59 and we already start with a logo
00:25:01 component now let's get rid of that
00:25:03 and let's create a new dot view file in
00:25:05 there so just an ordinary view component
00:25:07 as we used it in the pages folder
00:25:09 components in the components folder
00:25:11 however
00:25:12 will not be treated as routes but as
00:25:14 normal components which you can use
00:25:16 anywhere else in your
00:25:18 next application once you registered
00:25:20 them so here
00:25:21 i will create my recipe.viewfile
00:25:26 and let's follow the styling convention
00:25:28 and name this
00:25:30 recipe like that and in there i got a
00:25:33 template too of course
00:25:35 and in this template i now want to use
00:25:37 this
00:25:38 markup which i used in my index view
00:25:40 file in the recipes folder
00:25:42 so the code for one single recipe
00:25:45 essentially
00:25:46 this is now what i enter in this
00:25:48 template here
00:25:50 now the image the title and their
00:25:52 preview text that is something which i
00:25:54 expect to get from outside
00:25:56 from the page so what i'll do
00:26:01 is i will add a script section which we
00:26:03 could have also added to the components
00:26:05 in the pages folder of course
00:26:06 you're just creating a normal view
00:26:08 component
00:26:10 now in this script section here i'll add
00:26:13 a props key here to define the props
00:26:16 this
00:26:17 component expects and i will use the
00:26:20 very short version here i expect to get
00:26:24 a thumbnail i expect to get a title
00:26:27 and a preview text now
00:26:30 with that set up we can output this with
00:26:32 the normal tools
00:26:34 view gives us because that's really
00:26:36 important to understand you're creating
00:26:37 a view app so you use the same syntax
00:26:39 here
00:26:40 you just got some extra helpers in the
00:26:42 form of next
00:26:43 features so here i'll output the preview
00:26:47 text
00:26:49 and for the title here i'll output the
00:26:52 title property referring to this
00:26:54 prop and for the image here i'll bind
00:26:58 style here to a dynamic value to a
00:27:00 javascript
00:27:01 object where i got background image
00:27:05 using camel case since we're now
00:27:07 entering some javascript snippet in here
00:27:10 and close the object at the end and here
00:27:13 the url
00:27:14 is now something which i get dynamically
00:27:18 first of all this has to be a string now
00:27:20 because it is a javascript
00:27:23 value assigned to this property in this
00:27:25 object
00:27:26 so url like this and then i escape here
00:27:30 and close it and then here i want to
00:27:32 enter my thumbnail
00:27:34 and closing and close it in this url
00:27:38 and we need to close that string after
00:27:39 the closing parenthesis
00:27:41 so now we're assigning a dynamic value
00:27:43 to this background image which we in
00:27:45 turn
00:27:46 bind in this object to the style
00:27:48 property and now we get a reusable
00:27:50 component
00:27:51 which we can use by registering it in
00:27:53 our recipes
00:27:54 page in there to register it i'll also

00:27:57 add a script section
00:28:00 like this and now i can simply import it
00:28:04 by writing import recipe
00:28:07 from and now in next projects one of the
00:28:09 utilities it gives you
00:28:11 you can use add to refer to the root
00:28:13 folder
00:28:14 and therefore next slash components
00:28:17 slash
00:28:17 recipe and omit the dot view
00:28:20 this gives you direct access to this
00:28:22 recipe component
00:28:24 which you can now rest a register on the
00:28:26 components key in your view
00:28:28 object here in your view component
00:28:30 instance object
00:28:31 so here under components i can register
00:28:34 recipe like that this allows us to use
00:28:38 recipe in the template here so i replace
00:28:42 the article
00:28:43 with just recipe a self-closing element
00:28:46 if you want so
00:28:47 and there we can pass the thumbnail now
00:28:50 for that it would
00:28:51 have been nice to keep the image linked
00:28:53 so let's quickly do that
00:28:55 scrap that link again and now
00:28:58 do the changes and now reference
00:29:02 thumbnail and set that link
00:29:05 and let's split this over multiple lines
00:29:07 to keep it readable
00:29:08 we can also set a title here like
00:29:11 delicious
00:29:15 pizza and a preview text
00:29:19 which could be awesome
00:29:23 pizza yeah it's really descriptive as
00:29:25 you can see
00:29:26 now we can repeat that for second recipe
00:29:30 here
00:29:31 let's grab that url that image url
00:29:35 and use that here and now this is not a
00:29:38 visa
00:29:38 this is some sea food
00:29:41 salad or something like that or is it i
00:29:44 don't know
00:29:45 it's something like that so seafood cell
00:29:47 seafood salad
00:29:49 very tasty indeed
00:29:53 and let's remove that article so now
00:29:55 we're mixing next with something which
00:29:57 we already know
00:29:59 reusable components we know how to use
00:30:01 them in
00:30:02 a view app don't we make sure to save
00:30:05 all files and if you now return
00:30:08 got an error regarding the logo which is
00:30:10 still important in the main index file
00:30:12 let's remove it there can actually clear
00:30:16 can actually clear the entire stuff down
00:30:18 there the style the script
00:30:20 and remove the content here in the
00:30:22 section
00:30:24 so if you save that updated file
00:30:27 we get that now the image is missing
00:30:29 what's broken here let's quickly have a
00:30:30 look
00:30:31 we got our thumbnail and we're binding
00:30:34 background image to a url here
00:30:37 and the problem i have of course is the
00:30:40 styling
00:30:41 we get the styles for the recipe in the
00:30:44 recipes index.viewfile
00:30:46 let's cut them from there the recipe in
00:30:48 the thumbnail and go to the recipe
00:30:50 recipe.viewfile and add them there of
00:30:53 course
00:30:53 also scope them
00:30:58 and now enter the styles in there save
00:31:01 that file
00:31:02 and now we're back to where we already
00:31:04 were so now we're
00:31:06 having the two recipes here on that page
00:31:09 and we're outputting them there
00:31:11 now what if we wanted to click on one of
00:31:14 them
00:31:14 and then see the details page for that
00:31:17 we might want to go to something like
00:31:18 slash recipes
00:31:20 slash one for the id one
00:31:23 now you can also have dynamic paths in
00:31:25 noxjs by adding a subfolder
00:31:27 underscore that is important part the
00:31:30 underscore in the name of the folder or
00:31:32 the file
00:31:33 signals to next that the part after it
00:31:37 will be some variable some dynamic
00:31:40 parameter by which you can extract what
00:31:42 the user entered
00:31:43 so something like maybe id underscore id
00:31:47 and there i again create the

00:31:49 index.viewfile
00:31:50 and in that file for now i'll simply
00:31:52 output a paragraph where i just want to
00:31:54 output the id the user entered
00:31:57 and since it uses the normal view router
00:31:59 behind the scenes
00:32:00 you can reference dollar sign route that
00:32:03 is an
00:32:04 object automatically made available by
00:32:06 view
00:32:07 also in normal view apps where you use
00:32:09 the router by the way
00:32:11 and there you will have a params object
00:32:14 and now i can enter or access id on that
00:32:17 params object
00:32:18 because that folder is named id
00:32:21 the underscore is ignored it just
00:32:23 signals to next
00:32:25 that this is a dynamic segment and then
00:32:28 you enter the name in this case
00:32:29 id by which you plan on extracting that
00:32:32 parameter
00:32:33 and route parents is just a default
00:32:35 object given to you
00:32:36 by the vue.js router which next uses as
00:32:40 i said
00:32:41 with that if we save that file and we go
00:32:44 manually for now to recipes one then i
00:32:47 output one here
00:32:49 maybe it will charge to c but there is a
00:32:50 one that is that dynamic
00:32:53 segment i was referring to now this
00:32:56 gives us the opportunity of loading this
00:32:58 dynamically
00:32:59 so in here we could have a section class
00:33:03 single recipe and in there let's say we
00:33:07 have a h1 tag
00:33:08 where i want to output the title
00:33:14 then i let's say want to output a div
00:33:17 where i have my my image
00:33:21 and below that i have a paragraph with
00:33:24 the
00:33:25 recipe description and you can of course
00:33:27 always
00:33:28 enter more details now with that we got
00:33:32 a very basic page here without any
00:33:34 styling so let's quickly add some
00:33:35 styling with normal css
00:33:38 single recipe here i'll again use
00:33:41 flexbox to give it some styling so
00:33:44 display is set to flex
00:33:46 and then i'll set the justify content
00:33:49 property
00:33:49 to center to center everything again and
00:33:52 so
00:33:53 i do for align items to center this too
00:33:57 now with that we get some very basic
00:33:59 styling which we can always find here
00:34:01 later i also want to align all the text
00:34:03 in the center so let's
00:34:05 quickly enter text align center too and
00:34:08 let's
00:34:08 maybe give this
00:34:13 padding of 30 pixels if we want to
00:34:16 and now let's make sure we can reach
00:34:18 that page without
00:34:20 having to enter it manually so here on
00:34:22 the index.view file in the recipes
00:34:24 folder where we got our recipes
00:34:26 i want to get forwarded to that detail
00:34:29 page if we click one of the recipes
00:34:31 now for that let's simply assume that
00:34:33 each recipe here
00:34:35 also receives an id maybe one for the
00:34:37 first one and two for the second one
00:34:40 and in reality we would of course get
00:34:42 that recipe data from a database where
00:34:44 we probably also have ids for all the
00:34:46 recipes
00:34:47 here it's hard coded but that's just a
00:34:49 simple example here
00:34:50 so we got id 1 and id 2 here and
00:34:53 with that i want to output it of course
00:34:56 i want to
00:34:57 output the id or to be precise i want to
00:34:59 output a link which uses that id
00:35:02 so back in the recipe.view file here
00:35:06 first of all i'll add a new prop which i
00:35:08 expect
00:35:09 so i'll expect the id prop which we just
00:35:11 added
00:35:12 and now i will wrap this entire article
00:35:14 in a link however
00:35:16 not in a normal link not in an anchor
00:35:18 tag which i write manually
00:35:20 but in a next link object or component
00:35:23 now that is as the name suggests made
00:35:26 available by next
00:35:28 and it uses the view router router link
00:35:30 behind the scenes

00:35:32 in the end what this does or how this
00:35:34 works is you enter a tube property
00:35:37 with a path you want to navigate to now
00:35:40 here i will bind this dynamically by
00:35:42 adding a colon
00:35:43 and then i want to go to slash recipes
00:35:46 this should be a string because we're
00:35:47 binding to a javascript expression with
00:35:49 the colon here
00:35:51 slash recipes slash and then i will add
00:35:55 the id
00:35:56 now with that if we save this it looks
00:35:59 ugly because of the styling but
00:36:00 you can already see it's a link and if i
00:36:02 click on the first one
00:36:04 i'm taken to the detail page and the
00:36:06 same will be the case
00:36:08 for the second one so this works fine
00:36:11 one thing i do notice is the styling is
00:36:13 a bit off we
00:36:15 should set flex flow in that single
00:36:18 recipe page
00:36:20 to column to not put it next to each
00:36:23 other but below each other
00:36:25 so now we got the recipe detail pages
00:36:28 and you can see that we can go there
00:36:30 with a dynamic path parameter
00:36:32 by using that underscore in the folder
00:36:34 name
00:36:36 so with all that set up we got a way of
00:36:38 navigating around here in our
00:36:40 simple application now of course we can
00:36:44 enhance the styling in the recipe.view
00:36:46 file in the components folder
00:36:48 there i simply want to change my link
00:36:52 and behind the scenes it will use a
00:36:53 normal anchor tag so we can style that
00:36:56 so in that normal anchor tag i want to
00:36:58 disable
00:37:00 text decoration so set this to none
00:37:03 and i'll set the color to black
00:37:06 still to not have that blue text
00:37:09 now it's still clickable but it looks a
00:37:11 bit nicer
00:37:13 so now we can go to the detail pages now
00:37:16 to output something on the detail pages
00:37:18 we simply need to
00:37:19 load our data now we could use view x
00:37:22 you can use
00:37:23 view x and next applications too and a
00:37:26 link to instructions on how to use it
00:37:29 can be found in the video description or
00:37:31 of course also in that course i
00:37:33 mentioned earlier
00:37:34 in this video i want to load the data
00:37:37 from the server
00:37:38 it just adds the initial list of recipes
00:37:41 now we don't do that yet
00:37:42 so for now let's hard code it but i'll
00:37:44 soon add a way of loading this
00:37:46 dynamically
00:37:47 so for now i simply want to output the
00:37:49 id here so that we can really see a
00:37:51 difference
00:37:52 by accessing dollar sign route again
00:37:54 this is provided by the normal view
00:37:56 router
00:37:57 params which is a default object or
00:38:00 property of that
00:38:02 dollar sign route object and now id
00:38:05 because the folder is named underscore
00:38:07 id
00:38:08 now with that we can at least see a
00:38:10 difference if we click on that we see
00:38:11 two for that recipe
00:38:13 and one for the other one now
00:38:17 as i said a second ago in reality you
00:38:20 would not hard code this you would load
00:38:22 it from a server
00:38:23 right and this is what i also want to do
00:38:26 here
00:38:26 or at least what i want to fake we can
00:38:29 add a special method and let's start
00:38:31 with the recipes page
00:38:33 there in our script we can add
00:38:37 the async data method
00:38:40 now you might know the normal data
00:38:43 method from your
00:38:44 old view apps data was
00:38:47 a property a method where you return
00:38:50 an object which holds data with which
00:38:53 you want to
00:38:54 initialize your component and i could
00:38:57 hard code my recipes in there
00:38:59 nothing wrong with that however in next
00:39:02 apps which
00:39:03 are server-side rendered you get async
00:39:05 data as well
00:39:07 async data is a special method
00:39:10 it's comparable to the normal data it

00:39:13 also initializes your component with
00:39:15 some data
00:39:16 but async data is actually executed on
00:39:19 the server as well
00:39:21 so if you're in single page mode and
00:39:22 you're clicking around it's executed
00:39:24 with each click
00:39:25 on the client but if you're sending a
00:39:28 request
00:39:29 for a page for the first time as
00:39:32 explained at the beginning of this video
00:39:34 then you will actually execute the code
00:39:36 on the server
00:39:37 to fetch all the data which needs to be
00:39:40 rendered on the page
00:39:42 in advance on the server before
00:39:44 returning the page
00:39:46 so that you can pre-render the page with
00:39:49 the data
00:39:50 on the server and send back the finished
00:39:52 page to the user
00:39:54 and in this example here i won't reach
00:39:57 out to a server
00:39:58 i will still hard code some some well
00:40:01 code in here
00:40:02 but you could simply replace this with
00:40:04 an axis call or whatever
00:40:06 ajax library you want to use so you
00:40:09 could install
00:40:10 axias import access and then make a get
00:40:13 request
00:40:14 and the important thing is if you have
00:40:16 something like a promise like here for a
00:40:18 get request
00:40:20 you should return it and next will
00:40:22 automatically wait for this promise to
00:40:24 be resolved
00:40:25 take the results value and take it if
00:40:28 it's an object which
00:40:29 should be as the initial value or the
00:40:32 initial data for this component
00:40:34 now here i'm not using access and i'm
00:40:36 not using a server but i want to show
00:40:38 this
00:40:39 still so i will simply create a new
00:40:41 promise on my own
00:40:43 as you probably know a promise takes a
00:40:45 function as an argument
00:40:47 where we in turn have two arguments
00:40:50 reject and excuse me resolve and reject
00:40:56 and you execute these inside of the
00:40:57 promise to either resolve or
00:40:59 reject it now here i will use the normal
00:41:02 set timeout method and set a timeout to
00:41:05 let's say one and a half seconds and
00:41:08 after that
00:41:09 time this arrow function here will get
00:41:11 executed
00:41:12 and in this arrow function i simply want
00:41:14 to resolve some data and
00:41:16 this is really just some code i use to
00:41:18 fake an asynchronous
00:41:20 request to fake that we would fetch this
00:41:22 data from a server
00:41:24 so in there i resolve a javascript
00:41:26 object with let's say a recipes property
00:41:29 the name is up to you which might be an
00:41:32 array
00:41:32 and in that array i want to have my
00:41:34 objects and again this is really just
00:41:36 some dummy data
00:41:37 which you normally of course would fetch
00:41:39 from a server
00:41:41 now in there you might have an id could
00:41:43 be anything could be a number a long
00:41:45 string
00:41:46 something like this here and you will
00:41:48 have a tea title
00:41:50 so here i will use the delicious pizza
00:41:52 title
00:41:54 you will also have your preview text of
00:41:56 course
00:41:57 which is a string so here i will also
00:41:59 use the preview text from above
00:42:02 and you will have your thumbnail
00:42:06 like that so let's grab this thumbnail
00:42:09 link then now of course we have two
00:42:13 recipes here so let's also enter the
00:42:16 second one
00:42:18 there i will grab the title which i hard
00:42:20 coded into my template
00:42:22 from the template i will also grab the
00:42:24 hard-coded preview text
00:42:27 and i will also grab the hard-coded
00:42:30 image url so now this is all
00:42:34 coming as it would come from a server
00:42:37 in the form of a javascript array and
00:42:39 since i returned that promise in async
00:42:41 data
00:42:42 next will wait for this promise to

00:42:44 resolve or to fail
00:42:46 and will then merge the data which you
00:42:48 resolve so this object
00:42:50 with the data your component has anyways
00:42:53 now here we
00:42:54 don't have any other data we could have
00:42:55 and it would be merged
00:42:57 here however this will be our entire
00:42:58 component data the key thing is
00:43:01 in our template we can use that data
00:43:04 because the template will only be
00:43:06 rendered once this fetching is done
00:43:08 so there will be a recipes property
00:43:10 which we can reference in our
00:43:12 template that means we can remove the
00:43:14 second
00:43:15 recipe and for the first one i'll use
00:43:18 v4 and loop through all my recipes
00:43:22 in the recipes property so recipe here
00:43:26 the name that is up to you you can name
00:43:28 this whatever you want could be r
00:43:29 could be recipe recipes here however
00:43:33 is coming from the data of that
00:43:35 component and in our case
00:43:37 that has to be recipes because we get
00:43:39 back an object with a recipe's property
00:43:42 which will become our component data
00:43:44 eventually
00:43:46 so now we also should assign a key and
00:43:48 here we'll just use recipe id
00:43:51 each recipe has an id don't forget
00:43:54 and now we can really just bind all
00:43:57 these values
00:43:58 to the dynamic values we're fetching so
00:44:00 in this case to recipe
00:44:02 thumbnail referring to that thumbnail
00:44:05 property we added
00:44:06 and the same of course for title and
00:44:08 preview text so for title
00:44:10 it's recipe title and we should bind it
00:44:13 dynamically therefore
00:44:15 for id it's recipe id
00:44:18 and for preview text it's there for
00:44:23 recipe preview text like that
00:44:27 if we now save all files and we reload
00:44:29 this page
00:44:31 we should still see our recipes however
00:44:33 if we reload
00:44:35 it takes one and a half seconds because
00:44:38 this is pre-rendered on the server you
00:44:41 can best see it if i open
00:44:42 my url bar and i click the refresh icon
00:44:45 you see it spins and spins and here the
00:44:47 data is
00:44:48 because it waits for this promise to
00:44:50 resolve
00:44:51 now let's fake the same on our
00:44:55 detail page so i'll copy the async data
00:44:59 function here and add it to a script
00:45:02 in the id index.view file
00:45:06 so there i'll also add async data also
00:45:09 have a promise to
00:45:10 fake a real request where we get data
00:45:13 and here of course i resolve
00:45:16 a single recipe so i resolve an object
00:45:19 which will become my component data
00:45:21 which just has a recipe property and
00:45:24 that should be the recipe we loaded
00:45:26 so here of course we got two
00:45:30 possible recipes we could fetch the one
00:45:32 with id1 which is the delicious pizza
00:45:34 and the other one
00:45:36 and to make this simple because i don't
00:45:39 send a real request
00:45:41 to a server where i could send my route
00:45:44 parameter the id
00:45:45 to the server to only get back one
00:45:47 recipe
00:45:48 i will actually keep the full original
00:45:50 code where i get both recipes
00:45:53 but i want to filter
00:45:56 for the recipe which matches
00:46:00 my route id so
00:46:03 i will still only get a recipe here but
00:46:06 i got
00:46:07 an array here to which i will chain the
00:46:10 find method
00:46:11 a default javascript array method
00:46:14 find takes a function as an argument
00:46:17 which will be executed
00:46:19 on every object or element in that array
00:46:22 in this case
00:46:23 two elements so it will then execute
00:46:26 this function
00:46:27 with each element and receive that
00:46:29 element as an input to the function
00:46:31 and you should return true if that is
00:46:33 the element you wanted to find
00:46:35 and it will then return this element so
00:46:37 recipe will only be one of the two

00:46:39 elements here
00:46:40 i want to return the element where the
00:46:42 id each element has an id property don't
00:46:45 forget
00:46:46 is equal to the id we entered in our url
00:46:51 now in async data we actually can't
00:46:53 access dollar sign
00:46:54 route because the view component hasn't
00:46:56 been fully loaded yet
00:46:58 and hence this has not been made
00:46:59 available yet
00:47:01 but in async data you get a special
00:47:03 argument passed into by nax
00:47:05 js the context
00:47:10 argument context has a couple of
00:47:13 convenience
00:47:14 properties holds a lot of useful
00:47:16 information you can find a link to the
00:47:19 api documentation in the video
00:47:20 description and in this case
00:47:23 context has a params property which
00:47:25 holds
00:47:26 the params it can parse from your url
00:47:30 in this case i'm interested in the id
00:47:31 param and only if that matches
00:47:34 the id of an object here in the array
00:47:36 this will be returned as the recipe
00:47:38 which was loaded
00:47:40 so now i can output that here i can
00:47:42 output
00:47:43 recipe title here and here
00:47:46 i don't just want to have the preview
00:47:48 text but the full description text
00:47:50 so let's quickly add a new property to
00:47:52 both objects
00:47:54 description text this is
00:47:58 really a delicious meal
00:48:01 and yes it's the same text for both
00:48:03 recipes but just for demo purposes
00:48:06 so now we can output that here in the
00:48:08 paragraph we can output
00:48:10 recipe description text
00:48:13 and for the image i want to bind this
00:48:16 dynamically
00:48:17 to recipe thumbnail
00:48:20 and alt could also be bound dynamically
00:48:23 to recipe title
00:48:29 now if we reload that page
00:48:32 we got our recipe here with a rather big
00:48:35 image so
00:48:36 maybe we can do something about the size
00:48:38 here
00:48:39 recipe image as a class can be added to
00:48:41 the image
00:48:43 and now we can go down to the size and
00:48:46 style the recipe image here
00:48:48 in the styles to get it i give it a
00:48:50 width of 100 percent
00:48:51 and maybe see how that looks like
00:48:58 it's still very big but this is fine in
00:49:00 my opinion for a starter
00:49:02 now this is the delicious pizza and if i
00:49:04 go back
00:49:07 and i load the seafood salad it still
00:49:10 takes one and a half seconds because
00:49:12 async data has that promise which
00:49:14 resolves only after one and a half
00:49:15 seconds
00:49:16 and then i see the seafood salad looks
00:49:19 very good
00:49:20 to me so now this is a very simple
00:49:23 recipe page and you always see that
00:49:25 waiting time because we're faking that
00:49:27 http request we're doing which runs
00:49:29 either in the client if we're clicking
00:49:31 around
00:49:31 or on the server if we enter a url for
00:49:34 the first time
00:49:35 with that we get a very basic next
00:49:38 application
00:49:39 showing its core features server side
00:49:41 rendering
00:49:42 and also the you configure folders and
00:49:46 files
00:49:46 and i will give it give you the rest
00:49:48 approach now to finish this
00:49:51 very basic app up i'll add a second
00:49:54 component in the components folder
00:49:56 and this will be my header.view file to
00:49:58 have a little navigation bar
00:50:00 there i will just add a template with a
00:50:02 header component
00:50:03 and in there i'll have a nav component
00:50:06 with an unordered list with two list
00:50:08 items
00:50:08 in each list item i want to use a next
00:50:11 link
00:50:12 the first one goes to the starting
00:50:16 page the second one goes to my recipes
00:50:23 and actually i guess we have a third one

00:50:25 to the about page
00:50:27 and now we add the tool link to all of
00:50:30 them
00:50:30 now for the first one it's just slash
00:50:33 for the starting page
00:50:35 for the second one it's recipes and here
00:50:37 it's slash about
00:50:38 referring to the index.view file for
00:50:41 just slash
00:50:43 to recipes index.view for slash recipes
00:50:48 and to about index.view for slash
00:50:52 about now of course we need some styling
00:50:55 here
00:50:56 so let's add some scoped styling here to
00:50:58 style our header appropriately
00:51:01 maybe make sure that it has a width of
00:51:04 100 percent
00:51:06 um a height of
00:51:09 30 pixels maybe
00:51:12 let's set display to
00:51:16 flex and center everything with justify
00:51:19 content center
00:51:20 and align items center
00:51:24 and let's then also add some styling to
00:51:26 the unordered list let's set the list
00:51:28 style
00:51:32 to none remove all padding and
00:51:35 margin and also give it a display of
00:51:38 flex
00:51:38 to position the individual links next to
00:51:41 each other
00:51:42 by also adding justify content and then
00:51:45 maybe
00:51:49 center to and align items also centered
00:51:54 and then let's go to the list items
00:51:56 themselves
00:51:57 and let's each give a margin of zero to
00:52:00 top and bottom but 10 pixels to left
00:52:03 right to get some spacing between the
00:52:04 items
00:52:06 and now let's use that header and now
00:52:08 here's a special trick
00:52:09 we could include it in any page but of
00:52:12 course
00:52:13 all these pages should share the header
00:52:15 and that is where
00:52:16 layouts come into play each next page is
00:52:20 loaded into this default layout in the
00:52:22 position of this
00:52:23 next hook here and you can also set up
00:52:25 some general
00:52:27 app styles in the default view file i
00:52:29 will keep the ones which were set up but
00:52:31 you can of course
00:52:32 set this to your settings or clean it up
00:52:35 the thing is you can add a script
00:52:38 section in this layout default.view file
00:52:41 too
00:52:42 and by the way you should keep that file
00:52:44 because default.view is something next
00:52:46 will look for
00:52:47 as the default layout you guessed it
00:52:50 and in here i will import my header
00:52:53 from
00:52:56 add slash components header
00:53:02 and i will then add components here
00:53:05 header like this and add my header with
00:53:08 a capital h to not use the default
00:53:10 header
00:53:11 here now if you save all files you get
00:53:14 the header at the top
00:53:15 and you can indeed navigate around to
00:53:18 the different pages
00:53:21 now just saw the about page can use some
00:53:24 styling let's add some styles here too
00:53:27 and simply set some text alignments
00:53:32 here for the h1 tag but the core thing
00:53:35 is now
00:53:36 we got our nice header we can give it a
00:53:39 background color of maybe
00:53:42 five two one seven five one
00:53:46 like this and now also style our
00:53:50 anchor tags here in our header
00:53:54 to have a text decoration of non
00:53:59 and color of white maybe
00:54:03 so this looks now much better and now
00:54:05 with that
00:54:06 we have an application where we can
00:54:09 navigate around
00:54:10 get a header on each page and where we
00:54:12 take advantage of the core features of
00:54:15 next
00:54:16 clearly this is not the most beautiful
00:54:18 application you ever built
00:54:20 and clearly next has to offer way more
00:54:22 than that
00:54:24 but these are the core basics which i
00:54:26 wanted to show you
00:54:27 and i hope that this helps you getting
00:54:29 started with next

00:54:30 now if you want to dive deeper you may
00:54:32 have a look at my more
00:54:33 thorough introduction course on udemy or
00:54:36 additionally
00:54:37 at the really good official nux
00:54:39 documentation
00:54:40 which you can find are noxjs.org
00:54:43 there you find details about all the
00:54:45 different features how to use and
00:54:47 configure them
00:54:48 and also about features which i didn't
00:54:50 show in this video
00:54:52 i hope you got started with that video
00:54:54 though and i'd of course be more than
00:54:56 happy to welcome you in future videos
00:54:58 too
00:54:58 hopefully see you there bye

You may also like