This content originally appeared on DEV Community and was authored by Tony Kharioki
What is NextJS?
NextJS is a framework for creating pre-rendered React websites.
NextJS offers us both SSR(Server SIde Rendering) and SSG(Static Site Generation)
At this point lemme describe these terms...
SSR - React components are rendered into Html pages on the server on each request
SSG - Components are rendered onto Html pages at build time
This means react components are already rendered into Html pages before they reach the browser.
- on the flip side, without Next JS react renders components into the browser -> Client-Side Rendering.
So what are the benefits of SSG & SSR?
- Pre-rendering improves performance
- Better SEO(Search engine optimization) - response from the server is a fully rendered Html page meaning there are no blank pages.
So what are the prerequisites to building with Next JS?
- A basic to a good understanding of React.
- NodeJS installed on your pc - preferably version 10.13 and newer.
nice to have
- a good understanding of git version control.
Some resources
while I might not dive into building a simple web app with NextJs, I found a thread of amazing tutorials you can learn from.
Learn @vercel's Next.js For Free With These Awesome Resources ?
Built on top of React, Next.js has some incredible features such as server-side rendering, page routing & an impeccable developer experience.
If you want to learn more check out the resources below ?14:11 PM - 13 Apr 2021
Some interesting concepts of NextJs
Code splitting - by default NextJs already code splits our application. This way only the javascript code needed for the current page is served from the server and the next page is served when navigated to.
getStaticProps, ** getServerSideProps*, and **getStaticPaths* - when you build your next app for production, next is gonna prefetch any code in the background that might be needed when the user clicks on a link in the page. It does this by looking at all the link components on the current page and prefetches all the code for any of those pages. getStaticProps fetches data at runtime, getStaticPaths - specifies dynamic routes to pre-render pages based on data. getServerSideProps - fetches data on each request.
CSS support out-of-the-box - NextJs extends the concept of import beyond javascript allowing you to import CSS files from a javascript file. In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them, this means you can maintain the application state. In production, all CSS files will be automatically concatenated into a single minified .css file.
Optimized Image component - another cool concept introduced in NextJs v10; the Image component extends the Html <img/> element and optimizes it by allowing for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. The neat thing about it is; this component comes with lazy loading enabled by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into the viewport.
If you're not yet sold on NextJs, there's more...
Fast refresh - this feature gives you instantaneous feedback on edits made to your components. It is enabled by default in the latest versions.
Better error handling - If you make a syntax error during development, you can fix it and save the file again. The error will disappear automatically, without losing the component state.
Typescript - NextJs provides typescript support out-of-the-box.
Go ahead and try NextJs, then lemme know how your experience was.
You can find a few examples of NextJs apps on my github. here's an example.
app-list
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform…
This content originally appeared on DEV Community and was authored by Tony Kharioki
Tony Kharioki | Sciencx (2021-04-15T23:49:48+00:00) NextJS – getting started. Retrieved from https://www.scien.cx/2021/04/15/nextjs-getting-started/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.