Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frantallukas10/next-js-fundamentals
https://github.com/frantallukas10/next-js-fundamentals
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/frantallukas10/next-js-fundamentals
- Owner: frantallukas10
- License: mit
- Created: 2019-12-02T18:27:58.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:11:32.000Z (about 2 years ago)
- Last Synced: 2024-11-18T21:59:46.567Z (2 months ago)
- Language: JavaScript
- Homepage: https://next-js-fundamental.now.sh
- Size: 2.02 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-js-fundamentals
- [next.js docs](https://nextjs.org/docs)
- [next.js getting started](https://nextjs.org/learn/basics/getting-started)
- [next.js examples](https://github.com/zeit/next.js/tree/canary/examples)
- [next.js github repository](https://github.com/zeit/next.js)
- [deploy ZEIT Now](https://zeit.co/docs/v2/introduction)
## Demo
- [ZEIT Now](https://next-js-fundamental.now.sh)
## Basic setup
```
npm i -y
npm install --save react react-dom next
mkdir pages
```
replace scripts in package.json
```
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
```
## React components
- `Functional Component` or Dumb components, it can get data and return data
```js
const Index = () => {
return
I am Index Page
;
};
```
or we can write it like function classical syntax
```js
const Index = function() {
return
I am Index Page from Normal Function
;
};
```
- `Class Component` it has more functionality, more stuff and user Lifecycle function
```js
class Index extends React.Component {
render() {
return
I am Index Page from Class Component
;
}
}
```
## Get initial props
The behavior of an object depends on the variables and the methods of that class. When we create a class we create an object for it. For static methods, we don't require them as static methods means all the objects will have the same copy so there is no need of an object.
In instance method each object will have different behaviour so they have to call the method using the object instance
```js
class Human {
talk() {
console.log('I am talking');
}
static walk() {
console.log('I am walking');
}
}
// call instance method
const human = new Human();
human.talk();
// call static method
Human.walk();
```
## New pages
you have to create in the pages folder every new pages
## Single page application (SPA) and multi page application (MPA)
[info SPA vs MPA](https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58)
### `MPA`
### `SPA`
## Shared components - Header
[./components/shared/Header.js](./components/shared/Header.js)
## Base layout
[./components/layouts/BaseLayout.js](./components/layouts/BaseLayout.js)
[./pages/cv.js](./pages/cv.js)
[./pages/blogs.js](./pages/blogs.js)
[./pages/about.js](./pages/about.js)
## Types of styling
[next.js + sass config](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
## Fetching Data for Pages example use [JSONPlaceholder](https://jsonplaceholder.typicode.com)
[./pages/index.js](./pages/index.js)
## React lifecycle functions
[./pages/index.js](./pages/index.js)
## Dynamic route vs static route
Dynamic routing is also known as adaptive routing which change routing table according to the change in topology. Dynamic routing uses complex routing algorithms and it does not provide high security like static routing. When the network change(topology) occurs, it sends the message to router to ensure that changes then the routes are recalculated for sending updated routing information.
Static Routing is also known as non-adaptive routing which doesn’t change routing table unless the network administrator changes or modify them manually. Static routing does not use complex routing algorithms and It provides high or more security than dynamic routing.
## Basic server setup
[./server/ssr-caching.js](./server/ssr-caching.js)
[./server/ssr-catching.js](./server/catching.js)
## Server side rendering vs Client side rendering
- [very good google extension: View Rendered Source](https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob)
View source is dead. See how the browser renders a page, not just what the server sends.
A lightweight Chrome Extension that shows you how the browser has constructed (rendered) a page's original HTML into a functioning DOM, including modifications made by JavaScript.
An essential tool for web developers using JavaScript frameworks like Angular, ReactJS and Vue.js, and for SEOs to understand how search engines see your pages, especially considering Google's dynamic serving workaround.
Differences between raw and rendered versions are highlighted line-by-line showing how JavaScript has modified a page at render time.
### `SSR`
### `CSR`
### `benefits`
- [SSR vs CSR](https://nextjs.org/features/server-side-rendering#benefits)
### `interesting links`
- [SSR vs CSR](https://blog.logrocket.com/next-js-vs-create-react-app)
- [SSR vs CSR](https://codeburst.io/next-js-ssr-vs-create-react-app-csr-7452f71599f6)