Neil Haddley - Developer & Technical Consultant

Next.js (Part 1)

Neil Haddley • November 5, 2021

The React Framework for Production

create-next-app

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

npm run dev

accessing nextjs-blog

npm run dev

create the about page

React Functional Export Component (frce)

notice that the React from 'react' import is not needed

accessing the about page

Link component

The Link component is used to enable client-side navigation between pages.

Here I have used the Link component to improve performance of page navigation between the index and second-post pages in a posts folder.

In a production build Next.js automatically prefetches the code for linked pages in the background.

creating a posts folder

Network traffic when <a href=...> tag is used

Network traffic when Link component is used

public folder

Public files are added the project's public folder

profile.jpeg

accessing the profile.jpeg file

a page with a next/image component

Metadata

The 'next/head' component can be used to set the <title> tag for a Next.js page.

Page title is 'Posts'

CSS Modules

Next.js supports CSS Modules using the [name].module.css file naming convention.

CSS Modules

first-post page with CSS Modules component added

Styled Components

Styled Components is a CSS-in-JS tool that lets developers write CSS in JavaScript files.

I ran the following commands to install styled-components.

$ npm install styled-components

$ npm install --save-dev babel-plugin-styled-components

I added a .bablerc file with this content

{

"presets": ["next/babel"],

"plugins": [["styled-components", {"ssr":true}]]

}

Finally I copied the _document.js file from: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js to the project's /pages folder

see also: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

Styled Components

second-post page with styled-component added

about.js

TEXT

1function about() {
2    return (
3        <div>
4            About
5        </div>
6    )
7}
8
9export default about

index.js first-post.js and second-post.js

TEXT

1// index.js
2import Link from 'next/link'
3
4function index() {
5    return (
6        <>
7            <div>
8                <a href='/posts/first-post'>first</a>
9            </div>
10            <div>
11                <Link href='/posts/second-post'>
12                    <a>second</a>
13                </Link>
14            </div>
15        </>
16    )
17}
18
19export default index
20
21// first-post.js
22function firstpost() {
23    return (
24        <div>
25            First Post
26            <div>
27                    <a href='/posts'>home</a>
28            </div>
29        </div>
30    )
31}
32
33export default firstpost
34
35//second-post.js
36import Link from 'next/link'
37
38function secondpost() {
39    return (
40        <div>
41            Second Post
42            <div>
43                <Link href='/posts'>
44                    <a>home</a>
45                </Link>
46            </div>
47        </div>
48    )
49}
50
51export default secondpost

image.js

TEXT

1import Image from 'next/image'
2
3function image() {
4    return (
5        <Image
6            src="/images/profile.jpeg" // Route of the image file
7            height={144} // Desired size with correct aspect ratio
8            width={144} // Desired size with correct aspect ratio
9            alt="Your Name"
10        />
11    )
12}
13
14export default image

index.js

TEXT

1import Link from 'next/link'
2import Head from 'next/head'
3
4function index() {
5    return (
6        <>
7            <Head>
8                <title>Posts</title>
9            </Head>
10            <div>
11                <a href='/posts/first-post'>first</a>
12            </div>
13            <div>
14                <Link href='/posts/second-post'>
15                    <a>second</a>
16                </Link>
17            </div>
18        </>
19    )
20}
21
22export default index

layout.module.css layout.js and first-post.js

TEXT

1// layout.module.css
2.container {
3    max-width: 36rem;
4    padding: 0 1rem;
5    margin: 3rem auto 6rem;
6  }
7
8// layout.js
9import styles from './layout.module.css'
10
11export default function Layout({ children }) {
12  return <div className={styles.container}>{children}</div>
13}
14
15// first-post.js
16import Layout from '../../components/layout'
17
18function firstpost() {
19    return (
20        <Layout>
21            <div>
22                First Post
23                <div>
24                    <a href='/posts'>home</a>
25                </div>
26            </div>
27        </Layout>
28    )
29}
30
31export default firstpost

layout2.js and second-post.js

YAML

1// layout2.js
2
3import styled from "styled-components";
4
5const Layout2 = styled.div`
6max-width: 36rem;
7padding: 0 1rem;
8margin: 3rem auto 6rem;
9`;
10
11export default Layout2 
12
13// second-post.js
14
15import Link from 'next/link'
16import Layout2 from '../../components/layout2'
17
18function secondpost() {
19    return (
20        <Layout2>
21            <div>
22                Second Post
23                <div>
24                    <Link href='/posts'>
25                        <a>home</a>
26                    </Link>
27                </div>
28            </div>
29        </Layout2>
30    )
31}
32
33export default secondpost