In this post, we wanted to take a look at one of the frameworks of React.js called Next.js and also Accelerated Mobile Pages(AMP) and how can build AMP using Next.js. Did you know that Marvels official website was built on Next.js, cool right?
What is a Next.js?
Next.js is a React.js framework.
Everyone: But, what is a framework and what is different about React.js framework?
A framework is a standard way to build and deploy applications. In other words, framework is a set of basic principles which are common across projects. When we say React.js framework, it's a set of principles & conventions for building React.js apps.
Everyone: Why use a framework if we were building React.js without one?
You don't need to define these set of principles each time you start a new project.
The design of frameworks is done so that you needn't spend a lot of time figuring out what the right way is and can get started immediately.
Consistency is key especially across large teams, where a framework reduces second guessing and not to mention reading, maintaining and developing code is much easier and quicker.
How to use Next.js?
Now that we know that Next.js is a framework of React, let's dive into how to get started on this:
Similar to create-react-app
there is one for Next.js
called create-next-app
.
- Let's start our project, with this command:
npx create-next-app nextjs-prj
- Then we need to install Next.js, in our project
npm install --save next react react-dom
- Then you can start the application with
npx next dev
- There is already an existing welcome template in
pages/index.js
, but we will be replacing that to get an idea about what's going on:
function Home() {
return <div > Welcome to Next.js! < /div>
}
export default Home
Something quite interesting if you didn't notice was, you needn't worry about containers
and declaring the routes
like the usual React.js
apps, because you can add in pages
for eg; pages/home.js
would add a new route automatically for /home
π.
- Let's add some css!
function Home() {
return (
<div>
<p>Welcome to Next.js!</p>
<style jsx>{
`
p{
color: white;
font-size: 50px;
text-align: center;
}
`
}</style>
<style global jsx>{
`
body {
background: black;
}
`
}
</style>
</div>
)
}
export default Home
Now,
A few things might seem a bit different from the usual. So let's break it one by one.
<style jsx>{
`
p{
color: white;
font-size: 50px;
text-align: center;
}
`
}
</style>
Everyone: what is this style element?
Next.js is bundled with styled-jsx. Styled JSX is a package for supporting CSS for JSX, it allows you to write CSS with <style jsx>
for the elements.
Everyone: Is it similar to inline styling?
Not really, it's writing styles for classes and elements in the same page, although it does look like inline styling, but it isn't.
Everyone: What is the global prop and why is it separated?
Global styles are for styling all across the page. In our examples we don't use the body
tag as the framework has already declared it, but if we want to make any changes for the body
element we would need the global
prop.
- Can we add components?
Yes, we can. Next.js allows you to make components in the components/
directory.
Seems like there is already a Nav
element in the components/
so we could reuse it.
import Nav from '../components/nav' //imported the Nav element from components
function Home() {
return (
<div>
<Nav/>
<p>Welcome to Next.js</p>
<a href='/home'>home page</a>
<style jsx>{
`
p {
color: white;
font-size: 50px;
text-align: center;
}
a {
color: purple;
font-size: 60px;
text-decoration: none;
}
`
}</style>
<style global jsx>{
`
body {
background: black;
}
`
}
</style>
</div>
)
}
export default Home
So similar to most React.js applications we use the components
, in this case we imported Nav
element and used it.
That's how Next.js works.
Everyone: Ok, but why use Next.js when we already have React.js?
Why use Next.js?
In the above example we gave an example on how Next.js works, but why use Next.js?:
From the above example routing pages is definitely way easier. Just add it in the
pages
directory. For eg;pages/home.js
would automatically add a page/home
which would render frompages/home.js
.Something we didn't discuss was Next.js does server side rendering by default, if you use
create-react-app
it currently doesn't use server side rendering by default.
Everyone: What is server side rendering and why is it better?
Server side rendering of the website is when, you host all of resources on the server. The other way is client side rendering, where the resources are requested through javascript. Server side rendering is usually preferable for static websites, because you don't want to request for a website then wait for the JS to render the HTML, but rather you'd want the HTML when you request the server.
- Next.js has lazy loading for modules i.e., it has automatic code splitting which allows the pages to load faster.
From the above points, it seems Next.js may only be used for static websites, but it can be used for web apps as well.
Now that we have a grasp on Next.js let's try to extend our project to be used as AMP pages
What are AMP pages?
AMP pages are Accelerated Mobile Pages. AMP pages are optimized for mobile use, slower websites have very high bounce rates with AMP you can serve visitors quicker. AMP is said to be a signal on Google mobile search index. If you google for any article or topic, you can see these AMP pages on the top of the search index.
Everyone: How are AMP pages different from normal webpages?
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMP pages</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
Can check the example here.
There are a few rules which make a page AMP page:
<html amp>
identifies the page as AMP content.<script async src="https://cdn.ampproject.org/v0.js">
needs to be there inside the<head>
tag.You need a
<meta name="viewport" content="width=device-width,minimum-scale=1">
tag inside the<head>
tag.Page needs to start with
<!doctype html>
.There needs to be a link to the actual page inside the
<head>
tag for eg;<link rel="canonical" href="*actual page url*">
The
amp-boilerplate
(AMP boilerplate code) needs to be in the<head>
tag
From our above example:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
amp-boilerplate
is used for declaring CSS for the AMP.
How to build AMP pages with Next.js?
Luckily, another cool feature which we forgot to mention was Next.js
also supports AMP π.
Let's extend our example to be used as an AMP.
-
pages/index.js
import Nav from '../components/nav'
import { useAmp } from 'next/amp'
export const config = {
amp: true
}
export default () => {
const isAmp = useAmp()
return (
<div>
<Nav/>
<p>Welcome to Next.js</p>
<a href={isAmp ? '/home?amp=1' : '/home'}>home page</a>
<style jsx>{
`
p {
color: white;
font-size: 50px;
text-align: center;
}
a {
color: purple;
font-size: 60px;
text-decoration: none;
}
`
}</style>
<style global jsx>{
`
body {
background: black;
}
`
}
</style>
</div>
)
}
The useAmp
function from next/amp
function helps to decide whether to use AMP or not.
For our index page, we need to explicitly mention to use the page as an AMP, which is done through config
. With config
you can explicitly mention with amp: true
.
export const config = {
amp: true
}
-
pages/home.js
import { useAmp } from 'next/amp'
export const config = {
amp: 'hybrid'
}
export default () => {
const isAmp = useAmp()
return (
<div>
<p>{isAmp ? 'Not AMP Home Page' : 'Home Page'}</p>
<style jsx>{
`
p {
color: white;
font-size: 50px;
text-align: center;
}
a {
color: blue;
font-size: 60px;
}
`
}</style>
<style global jsx>{
`
body {
background: black;
}
`
}
</style>
</div>
)
}
In our index
page, we explicity mentioned to use AMP with amp: true
, but in the home
page we are using amp: hybrid
. We did it because, now AMP needs to be decided based on whether the homepage (index page) was an AMP or not.
If you check the index
page as well, you can see here that
<a href={isAmp ? '/home?amp=1' : '/home'}>home page</a>
if the page isAmp
, in the params we pass amp=1
.
Cool! we extended our example to be used as an AMP too.
Conclusion
Next.js is a very cool React.js framework, for quickly building websites. It has lot of interesting features, and getting started on
Next.js
is much easier instead of starting from scratch.Next.js comes up bundled with styled-jsx. Styled-JSX allows you to write styles for the classes and elements inside the pages/components and also globally to
body
and encapsulating elements as well.π€AMP pages are optimized for mobile use, slower websites have very high bounce rates with AMP you can serve visitors quicker.
With the support that Next.js has provided for AMP, building AMP pages gets much easier.
If you want to check out the project, you check out the Next.js example that we worked on here, for the AMP Page example you can check it out here and the official Next.js examples here.
Check out our official blog page: https://blog.quicklyreact.com/
Top comments (0)