Class notes
Next JS Notes
- Course
- Institution
I've done some studies and got this notes about Next JS framework of React JS. I hope this is useful.
[Show more]
Seller
Follow
windwinsor50
Content preview
Next.JSNext.js Tutorial #1 - Introduction & Setup
Next js is a react framework that allows us to create pre-rendered react websites. It is a
framework that can be used via server-side rendering or static site generation. In this series i
'm going to show you how to use next to create a simple ninja list website. Before you start
this course you should already have at least a basic to good understanding of react now if
you do n't definitely check out my full react tutorial right here on youtube. You will need
node. js installed on your computer you 'll need version 10. 13 or later installed. Each lesson
has its own branch right here so if you want to see the code for lesson four for example you
select the lesson 4 branch. Next is where all of our different page components are going to
be created the idea being that every page in next has its own components its own react
components now at the minute the only page component we have is this index component.
We also have this app. js file and this is kind of like the root component. All of our pages go
in the pages folder and we have this public folder.
with just a div and then inside that div we 're going to do an h1 that says home page or
something like that i'm going to save it it 's gon na automatically refresh in the browser and
now we can see this new content now remember this component is being pre-rendered
before it even reaches the browser during development this is done via server-side
rendering.
Next.js Tutorial #2 - Pages & Routes
Each page component has its own file inside the pages folder so the file name and location
of each page component is tied to the route for that particular page for example if i create a
new file inside this called about. js then next we 'll automatically create a route forward slash
about which is the name of the file to serve up this components so we create a react
component for this page. For example i could create page components inside here and let 's
do one called test. js and we 'll create a stateless functional component for this called test.
Then inside here i'm just going to do a div and then inside that an h1 that says test like so
and save it. Next js generates routes automatically for these pages.
Next.js Tutorial #3 - Adding Other Components
In next you can have dropping components that are not page components so things like a
navbar component or a contact form component which we can then reuse in multiple
different page components if we need to. These dropping components we do not place
inside the pages folder we create them somewhere else and i 'm going to create a new
folder in the project root. React components are not page components but instead are
dropped in to page components and that can be reused we could reuse those components
in multiple different page components if we wanted to and remember we do n't create those
reusable dropping components inside the pages folder we create them in a separate folder
somewhere else in the project structure.
Next.js Tutorial #4 - Linking Between Pages
The way we do this in next applications is by using a special components called the link
component. The link component adds the ability to do client-side navigation in the browser
meaning that different pages are loaded in via javascript and not new html page requests to
the server so it results in a much quicker website experience when going between pages. By
default next automatically code splits our application so the only the javascript code that 's
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller windwinsor50. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $8.29. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
77973 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now