Learning Nextjs from different resources and making an sample website. Come lets all learn together 🤑
- Next JS is frontend React framework built top on react by vercel
- This is popularly used in frontend frameworks over plain react
- Main reason for such popularity is server-side rendering and static page generation
- Next JS gives better developer experience in form pit of success
Server-side Rendering :
- Unlike traditional react app rendering in client-side, next app renders in server-side to improve SEO and Performance
- In normal react you might want to statically pre-render some pages for performance and SEO
- This means First page loads renders through server
Features :
- SPA aplicable
- Easy and dynamic routings through page folder
- API routes (for dynamic pages like /post/1)
- static site generation
- built-in CSS and Sass support
- easy deployment through github/ bitbucket
We are going to build next-class simple 😂 blog and the link is click me witness blog
Through this learnings we will be using NPM instead of Yarn
- NodeJS (latest version don't scold me later 😅)
- create a next-app boiler code folders using cmd
npx create-next-app app-name --use-npm
To test the app creation use below cmds
$ cd app-name
$ npm run dev
So far, we have created only one page app. Now we will try to create many pages and start navigating through them.
- NextJS uses file system based routing, any .js files placed in
pagesfolder acts as each webpage - By default
index.jsfile as root page
pages/index.js → /
pages/blog/first-post.js → /blog/first-post (nested pages)
pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
- Add
anyPageName.jsfile in pages folder and access it via http://localhost:3000/anyPageName
Links are used to make client side navigation rather than page reload from server-side
- In NextJS we use
Linkcomponent fromnext/link
<Link href="/firstPost">
<a>First Page</a>
</Link>
-
Assets :
- Assets like images, favicons which public users can access, will be stored in /public folder
- We can use
next/imageto extend new features whichimgtag has - Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.
When using
Image, we need to specify height and width props
-
Metadata :
-
We can add metadata related to the individual page(pageName.js), or as whole website(app.js)
-
NextJS uses
Headtag fromnext/headinstead ofheadtag in htmlimport Head from 'next/head' <Head> <title>Create Next App</title> <link rel="icon" href="/favicon.ico" /> </Head> -
To use 3rd party js script we use
Scripttag fromnext/scriptinstead of traditional<script>to optimize the js file loadings and performanceimport Script from 'next/script' <Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" onLoad={() => console.log(`script loaded correctly, window.FB has been populated`) } />
-
By default nextjs app pages are pre-rendered, which means app generates HTML for each page in advance instead of client-side js. This increase perfomance and SEO
Two types of Pre-rendering
- Static generation (Recommended): HTML is generated at build time and will be reused on each request
- Server-side: HTML is generated on each request
We can mix-use both this form in different pages