14. Next.js Tutorial (1)

 1. Introduction. (No Next.js) Basic example. Load React, React-Dom, and Bable from unpkg.com

!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <!-- React-->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- React-DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   
    <!--script type="text/javascript"-->
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. </h1>, app);
    </script>
  </body>
</html>

Three dependencies are enclosed in yellow. The red line uses React functions and "jsx" code

2. Create a Nextjs application

Let's follow these steps:

npx create-next-app@latest my-app10 --ts
cd my-app10
npm install clsx // (optional) Install clsx library to toggle classes
npm install -D tailwindcss autoprefixer postcss // (optional) Install tailwindcss
npm install -D sass // (optional) Install Sass
npm install remark remark-html // (optional) Install remark library
npm run dev


3. Navigating between pages (next/link component- client-side navigation)

The main page, (index.tsx) is in the my-app10/pages folder, it is accessed by 

http://localhost:3000/

if you create a page (first-post.tsx)  in my-app10/pages/posts folder, with this code (Note the import Link statement:


import Link from "next/link";

export default function FirstPost() {
    return (
      <>
        <h1>First Post</h1>
        <h2>
          <Link href="/">Back to home</Link>
        </h2>
      </>  
    );
  }


it is accessed by 

http://localhost:3000/posts/first-post

In the index.tsx page you should also import the Link function and you can navigate to it as

<Link href="/posts/first-post">Read this page....!</Link>

NOTE: There is a great difference between using <Link href="/" > and <a href="/" >, the second produces a reload effect so it is slower.

NOTE: No routing libraries are needed with Next.js.

NOTE: If you need to link to an external page outside the Next.js app, just use a <a> tag without Link.

4. Static Assets (Images, metadata, javascript,CSS..)

Assets can be placed in my-app10/public folder. The files in this directory can be referenced from the root application similar to pages 

4.1 Images (next/image component)

The Image function from Next.js is useful for optimization. Here is the code of a function that uses an image

import Image from 'next/image';

//const GosImage = () => (
export function GosImage () {
    return(
        <Image
            src="/images/gos.jpg" // Route of the image file (my-app10/public/image/gos.jpg)
            height={144} // Desired size with correct aspect ratio
            width={144} // Desired size with correct aspect ratio
            alt="Gos d'Edu"
        />
    );
}

4.2. Metadata

Ref: https://nextjs.org/learn/basics/assets-metadata-css/metadata

With this page, the Head element is added and display its metadata:

import Link from "next/link";
import Head from "next/head"

export default function FirstPost() {
    return (
      <>
        <Head>
          <title>First Post Edu</title> // Metadata
        </Head>
        <h1>First Post Pepe</h1>
        <h2>
          <Link href="/">Back to home</Link>
        </h2>
      </>  
    );
  }

NOTE: the my-app10/pages/_document.js file has customization (language ..)

4.3. Third-party javascript (next/script component)

Ref: https://nextjs.org/learn/basics/assets-metadata-css/third-party-javascript

You can add javascript to the <Head> component to load the script as quickly as possible.

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

But it's better to use the <Script> component

import Link from "next/link";
import Head from "next/head"
import Script from "next/script";

export default function FirstPost() {
    return (
      <>
        <Head> <title>First Post Edu</title> </Head>
        <Script
          src="https://connect.facebook.net/en_US/sdk.js" 
          strategy="lazyOnload"
          onLoad={() => console.log(`script loaded correctly, window.FB has been populated`) }
        />
        <h1>First Post Pepe</h1>
        <h2> <Link href="/">Back to home</Link> </h2>
      </>  
    );
  }

Note the lazy loading strategy and the console log after loaded the script

4.4. CSS Modules

4.4.1 CSS file in the same folder of the component (component.module.css)

Ref: https://nextjs.org/learn/basics/assets-metadata-css/layout-component

Let's create these 2 files:
1) my-app/components/layout.module.css

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

2) Create the Layout component

import styles from './layout.module.css';

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

Note the reference to the component in yellow. The CSS file name must end with .module.css

4.4.2 Global styles (called from my-app10/pages/_app.tsx)

Ref: https://nextjs.org/learn/basics/assets-metadata-css/global-styles

1) Create the CSS file my-app10/styles/globals.css and add the CSS code for all the elements in the application
2) Add the import of the file to the my-app10/pages/_app.tsx
import styles from '@/styles/globals.css';

4.4.3 Using clsx library 

Ref: https://nextjs.org/learn/basics/assets-metadata-css/styling-tips

This library lets you simplify code avoiding the use of className

4.4.4 Customizing PostCSS Config (file postcss.config.js)

To add the Tailwind CSS:

  • Install Tailwind CSS: npm install -D tailwindcss autoprefixer postcss
  • Create the files postcss,config.js and tailwind.config.js, and use the CSS classes
//file my-app10/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

//==============================================

//file //file my-app10/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4.4.5 Using Sass

You need to install Saas using

npm install -D sass






Comentarios

Publicar un comentario

Entradas populares de este blog

18. Next.js Tutorial (5). Deploying. HTTPS

1. Deploying and running the applications If you want to execute the application in a Node.js server, as far as I know, follow theses steps:  1. Execute npm run build , and verify there is no errors. 2. Try to execute the application in the 2 ways:     2.1 Development mode: npm run dev  and     2.2 Production mode:  npm run start    Verify that the application runs OK in both cases! 3. You must copy all the contents of the project folder (in my case my-app10) to another folder in the server , then, execute  npm run start and verify that   the application works. But it runs HTTP! If you want to change the port of the server, change the " start " parameter in the package.json file as follows: "start": "next start -p $PORT " where $PORT is the desired port (for instance 3001, 8080 ..) 2. Alternatively running HTTP. Using server.js After you have copied the development folder to the server, follow these steps: 1. Create the file   server.js  in the my-app10
Leer más