![](\"https://s3.amazonaws.com/contentkit/static/cjeqgfo23nmwd0167ynqe7xi8/next.png\")
\nNextJs is a framework on top of React. Some features of NextJs include:
\nIt can take some time to get hang of the \"Next\" way of doing things. Here are some things that I wish I knew when I first got started with Next.
\n<Link> CorrectlyOne of the merits of NextJs is code-splitting and prefetching. Code-splitting means that if the user visits one page they don't need to download the entire app bundle. Prefetching let's the user navigate around your app without inducing a page refresh which makes the app seem less snappy. On a traditional website you click a link, navigate to a new page, and the page refreshes.
\nWith Next you can pass the prefetch prop to . When the user clicks the URI may change in the address bar but the page doesn't reload.
\nWhile Next's prefetch feature is great it can be confusing to use at first.
\nLet's say you have a post at /posts/my-post-slug and you want to link to it. The key is to realize that NextJs prefers query strings to pretty URIs. Next will always prefer /posts/id?=post-slug. In the Link as prop you specify the pretty URI, but then you also need to tell the Link component the query string version with href.
\nimport Link from 'next/Link'\nconst Btn = ({post}) => ( \n <div>\n <Link\n prefetch\n href={{ pathname: '/posts', query: { id: post.slug } }}\n as={`/${post.slug}/`}\n >\n Next\n </Link>\n </div>\n)\nexport default Btnserver.js:
\n// server.js\n...\nserver.get('posts/:id, (req, res) => {\n // Next defaults to using query strings, e.g., /posts?id=slug instead of posts/slug\n // Therefore we merge req.params and req.query and make it accessible to pages/posts.js.\n const query = Object.assign({}, req.params, req.query)\n return app.render(req, res, '/posts', query)\n})pages/posts.js
\npages/posts.js\n...\nclass Posts extends React.Component {\n // getInitialProps() runs on both the server or the client depending on the situation.\n static async getInitialProps(ctx) {\n const {req, query} = ctx\n return query\n }\n render() {\n return(\n <div></div>\n )\n }\n}Link To Serve Global StylesheetsSometimes you don't feel like using the latest and greatest way to style React components. You just want to use a static, global stylesheet. Maybe SASS. To accomplish this, see the following code snippet below. We use Next's Head component.
\nIn production, we include a standard link to the stylesheet. But in development we use dangerouslySetInnerHTML to inline the css.
\nThe following snippet is a
// components/Layout.js\nimport Head from 'next/head'\nimport inlineCSS from '../css/main.scss'\nclass Layout extends React.Component {\n render() {\n let stylesheet\n if (process.env.NODE_ENV === 'production') {\n stylesheet = <link rel=\"stylesheet\" type=\"text/css\" href=\"/assets/main.css\" />\n } else {\n stylesheet = <style dangerouslySetInnerHTML={{ __html: inlineCSS }} />\n }\n return(\n <div>\n <Head>\n <title></title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n {stylesheet}\n </Head>\n {this.props.children}\n </div>\n )\n }\n}Then on the server (assuming you're using Express):
\n// server.js\nconst sass = require('node-sass')\nconst path = require('path')\nconst fs = require('fs')\nconst sassResult = sass.renderSync({\n file: path.resolve(__dirname, '../../source/css/main.scss'),\n outputStyle: 'compressed',\n})\n server.get('/assets/main.css', (req, res) => {\n res.setHeader('Content-Type', 'text/css')\n res.setHeader('Cache-Control', 'public, max-age=2592000')\n res.setHeader('Expires', new Date(Date.now() + 2592000000).toUTCString())\n res.send(sassResult.css)\n })In next.config.js:
\n// next.config.js\nmodule.exports = {\n webpack: (config, { dev }) => {\n config.module.rules.push(\n {\n test: /\\.(css|scss)/,\n loader: 'emit-file-loader',\n options: {\n name: 'dist/[path][name].[ext]',\n },\n },\n {\n test: /\\.css$/,\n loader: 'babel-loader!raw-loader',\n },\n {\n test: /\\.scss$/,\n loader: 'babel-loader!raw-loader!sass-loader',\n },\n )\n if (config.resolve.alias) {\n delete config.resolve.alias.react\n delete config.resolve.alias['react-dom']\n }\n return config\n },\n}