Skip to main content

Next.js Basic

 Next.js is a flexible React framework that gives you building blocks to create fast web applications.

In React, event names are camelCased 

npm install react react-dom next  //to get the base code in current folder

Server Components allow developers to better leverage server infrastructure. For example, you can move data fetching to the server, closer to your database.

all components inside the App Router are Server Components by default.

To improve the performance of your application, we recommend moving Client Components to the leaves of your component tree where possible.

For example, you may have a Layout that has static elements (e.g. logo, links, etc) and an interactive search bar that uses state.

Instead of making the whole layout a Client Component, move the interactive logic to a Client Component (e.g. <SearchBar />) and keep your layout as a Server Component. 

Good to know: In Next.js, during the initial page load, both the rendered result of Server Components from the above step and Client Components are pre-rendered on the server as HTML to produce a faster initial page load.

You cannot import a Server Component into a Client Component:

npm run dev // to execute the Next js and launch on the browser

Routing Concept: 

You cannot import a Server Component into a Client Component:

Pages:

 pages/index.js // home page

 pages/blog.js // localhost/blog

 pages/[blogid].js // blog/1

 pages/product/index.js /product

pages/product/[productId]/index.js =>  /product/3

 pages/product/[productId]/review/[reviewId].js =>  /product/3/review/4

For nested routes make folder [product]/[reviewid].js like this, 

Catch ALL routes :

any url which has docs in the url will catch

 pages/docs/[...params].js  // docs/feature/2/content/1

 pages/docs/[[...params]].js  // docs/

Link Component Navigation:

import {Link} from 'next/link'

<Link><a href="/blog">Blog</a></Link>

How to concatenate string with value:

<Link><a href={`/product/${productid}`}>Blog</a></Link>

router.push(/product) // to redirect to another page

 

Pre Rendering : 


 

 

 

 

 

 

Static generation Issues :

 

Labels:

Comments

Post a Comment

Popular posts from this blog

Get The field values of node in Drupal 8

use Drupal \ node \ NodeInterface ; /** * Implements hook_ENTITY_TYPE_insert() for node entities. * * This tests saving a node on node insert. * * @see \Drupal\node\Tests\NodeSaveTest::testNodeSaveOnInsert() */ function node_test_node_insert ( NodeInterface $node ) { // Set the node title to the node ID and save. if ( $node - > getTitle ( ) == 'new' ) { $node - > setTitle ( 'Node ' . $node - > id ( ) ) ; $node - > setNewRevision ( FALSE ) ; $node - > save ( ) ; } } Now There is so many functions are there to get the values, For All the functions available visit the API code, https://api.drupal.org/api/drupal/core%21modules%21node%21src%21NodeInterface.php/interface/NodeInterface/8.2.x Some of as below, Node edit form, Drupal 8 Automatically Load the whole object no need to load the entity like below, if ($event->getFormId() == 'node_alexa_audio_clips_edit_form') { $node = \Drupal::ro...
Post a Comment
Read more

Dependency Injection in Drupal 8

Here are the important nuggets: DI is a design pattern used in programming. DI uses composition. DI achieves inversion of control. Dependency == service that your class needs == object of a certain type. Inject == provide == compose == assemble. Container == service container == dependency container. Instead of using  \Drupal::service('foo_service') , get the service from the  $container  if using a class. And the important reasons: Externalizing dependencies makes code easier to test. It allows dependencies to be replaced without interfering with other functionality. Retrieving dependencies from the container is better for performance. Services: node.grant_storage The easiest examples to find are services that have arguments, because you can search *.services.yml files for the word "arguments". In  node.services.yml  for example, there is this entry: node.grant_storage: class: Drupal\node\NodeGrantDatabaseStorage argument...
Post a Comment
Read more

How to span column of custom table in Drupal

If you want to span the column of custom drupal table like below image, Follow the below code to make the header of the table , <?php $header = array('S.N','District', array('data' => '<div class ="house">Household </div><br><span>Rural</span> <p>Urban</p>','colspan' => 2), array('data' => '<div class ="house">Members</div> <br><span>Rural</span> <p>Urban</p>','colspan' => 2), 'Duplicate/Failed Registration', array('data' => '<div class ="house">Pending De duplication </div><br><span>Rural</span> <p>Urban</p>','colspan' => 2), 'Non Un-organised Workers', 'SSID Generated', 'No. of Card Personlised', ); $rows[] = arra...
1 comment
Read more